弹框CSS、JS

标签：弹框 css js

非本人原创，此为本人导师代码，在此整理分析。

1、遮蔽层，弹框弹出时，页面变灰。

CSS部分

.overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla(0, 0%, 0%, .7);}

2、定时提示小弹框，页面垂直居中显示

CSS部分

 /*toast提示*/

    .toast{position:fixed;top:50%;left:50%;z-index:1100;display:none;width:13em;padding:.8em 1em;background-color:hsla(0, 0%, 0%, .7);
        text-align:center;color:#fff;font-size:14px;line-height:1.3;border-radius:.5em;
        box-shadow:0 0 4px 2px hsla(0, 0%, 0%, .3);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

JS部分

   /**
     * toast提示，用于提示用户信息，4秒后自动关闭，点击页面关闭
     *调用：toast(string)
     */
    toast: (function() {
        var d = document,
            ele = d.getElementById("toast"),
            isVisible = 0,     //还想不明白为什么要设置这里
            identity;

        if(ele === null) {
            ele = d.createElement("div");
            ele.id = "toast";
            ele.className = "toast";
            ele.style.display = "none";
            d.body.appendChild(ele);
        }       //创建DIV

        var hideFn = function() {
            if(isVisible) {
                clearTimeout(identity);
                ele.style.display = "none";
                isVisible = 0;
            }
        };

        d.addEventListener("click", hideFn, true);

        function show(string) {
            ele.innerHTML = string;
            ele.style.display = "block";
            isVisible = 1;
            clearTimeout(identity);
            identity = setTimeout(function() {
                ele.style.display = "none";
                isVisible = 0;
            }, 4000);

            return identity;
        }

        return show;
    }())
};

/**
     * 弹窗提示功能
     * dialog.show(jq)  显示弹窗
     * dialog.hide()  关闭弹窗
     */
    dialog: (function() {
        var overlay, dialog;

        if($("#overlay").length > 0) {       //检查#overlay是否存在

            overlay = $("#overlay");
        } else {
            overlay = $(‘<div id="overlay" class="overlay"></div>‘).appendTo($("body"));
        }

        dialog = $(".dialog-box");

        var show = function(jq) {
            overlay.show();
            jq.show();          //特定弹框显示
    };

        var hide = function() {
            dialog.hide();              //全部弹框隐藏
            overlay.hide();
        };

        dialog.find(".btn-close").on("click", function(event) {         //这是有一个十字关闭按钮
            $(event.target).parents(".dialog-box").hide(); //target 属性规定哪个 DOM 元素触发了该事件            overlay.hide();
        });

        overlay.on("click", hide);                //相当于点击弹框外，弹框隐藏

        return {
            show: show,
            hide: hide
        }
    }()),

本文出自 “大番薯1号” 博客，谢绝转载！

弹框CSS、JS

标签：弹框 css js

原文地址：http://ppxxll.blog.51cto.com/10549080/1677866