移动端弹出框插件

在H5移动端项目开发过程，肯定会遇到不少与客户打交道的弹出框。

当然基于H5+ API中有提供系统的弹出对话框，虽然能够达到效果，但是实际的美观是几乎不存在的。

应项目需要，草草的写了一个弹出框的效果。

作为程序猿代码是最敏感的，废话也少说了，直接看下面的代码：

css代码部分：

#lee-mask {
    background: #000;
    opacity: 0.7;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}
#lee-content-wrap {
    position: absolute;
    z-index: 1001;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .5);
    display: none;
}
#lee-content {
    position: relative;
    width: 300px;
    height: auto;
}
/* title */

#lee-content .title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 30px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #0B1F35;
    color: #fff;
}
/* content */

#lee-content .content-wrap {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    bottom: 40px;
    padding: 10px;
    box-sizing: border-box;
}
/* footer */

#lee-content .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
}
#lee-content .footer .btn-group {
    position: relative;
    width: 100%;
    height: 100%;
}
#lee-content .footer .btn-group .button-one,
#lee-content .footer .btn-group .button-two,
#lee-content .footer .btn-group .button-block {
    position: absolute;
    height: 100%;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
#lee-content .footer .btn-group .button-one {
    background: #3F474F;
    left: 0;
    right: 50%;
}
#lee-content .footer .btn-group .button-two {
    background: #596396;
    left: 50%;
    right: 0;
}
#lee-content .footer .btn-group .button-block {
    background: #596396;
    left: 0;
    right: 0;
}

/* input样式框 */
#lee-content .popup-input-wrap {
    margin-top: 15px;
}
#lee-content .popup-input-wrap .input-withdraw {
    margin: 0;
    padding: 0 10px;
    height: 30px;
    border: none;
    border-bottom: 1px solid #ccc;
    line-height: 30px;
    font-size: 16px;
}
#lee-content .input-extras {
    margin: 10px;
    text-align: right;
    font-size: 14px;
    color: #CDA;
}

.fadein {
    -webkit-animation: fadein 0.2s ease-in-out;
    animation: fadein 0.2s ease-in-out;
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.mask-fadein {
    -webkit-animation: mask-fadein 0.2s ease-in-out;
    animation: mask-fadein 0.2s ease-in-out;
}
@keyframes mask-fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}
@-webkit-keyframes mask-fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}
.fadeout {
    -webkit-animation: fadeout 0.2s ease-in-out;
    animation: fadeout 0.2s ease-in-out;
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.mask-fadeout {
    -webkit-animation: mask-fadeout 0.2s ease-in-out;
    animation: mask-fadeout 0.2s ease-in-out;
}
@keyframes mask-fadeout {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes mask-fadeout {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
    }
}

js代码部分：

(function(global, factory) {
    factory(global);
})(window, function(global) {

    var defaults = {
        width: 300,
        height: 200,
        addmaskevent : false,
        title: {
            height: 40,
            content: "提示",
            color: "#5f5d5d",
            background: "#06495a"
        },
        main: {
            content: "内容项填写",
            align: "left",
            background: "#ff979696",
            font: "1em",
            color: "#000"
        },
        buttons: [{
            name: "确定",
            background: "#c4e8da",
            color: "#26a65b",
            click: function() {
                return true;
            },
            touchstart: function() {
                return true;
            },
            touchend: function() {
                return true;
            }
        }, {
            name: "取消",
            background: "#f6ccc2",
            color: "#d64541",
            click: function() {
                return true;
            },
            touchstart: function() {
                return true;
            },
            touchend: function() {
                return true;
            }
        }]
    };
    
    

    function Popup(options) {
        if (this instanceof Popup) {
            this.args = util.extend(defaults, options);
            this.renderNode() // 渲染节点
            this.renderAttr() // 渲染属性值
            this.maskevent();    // 给mask添加时间蒙层
        } else {
            new Popup(options);
        }
    }

    Popup.prototype = {
        // render model
        renderNode: function() {
            this.mask = document.createElement("div");
            this.mask.id = "lee-mask";
            this.content = document.createElement("div");
            this.content.id = "lee-content-wrap";
            this.content.innerHTML = '<div id="lee-content">'+
                                        '<div class="title"></div>'+
                                        '<div class="content-wrap">'+
                                        '</div>'+
                                        '<div class="footer">'+
                                            '<div class="btn-group">'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>';
            document.body.appendChild(this.mask);
            document.body.appendChild(this.content);
        },
        // 给mask添加点击隐藏事件函数
        maskevent : function(){
            var _this = this;
            if(_this.args["addmaskevent"]){
                _this.mask.addEventListener("tap", function(){
                    _this.hide(_this.mask, _this.content)
                })
            } else {
                return;
            }
        },
        // 渲染属性值
        renderAttr: function() {
            var inner = this.innerContent = document.getElementById("lee-content"); // 内容
            var title = this.title = inner.querySelector(".title"); // 头部信息显示
            var group = this.group = inner.querySelector(".btn-group"); // 按钮组件
            var wrap = this.wrap = inner.querySelector(".content-wrap"); // 内容环绕部分
            var _this = this;
            // 整体框架大小设置
            util.renderCss(inner, {
                "width": this.args["width"] + "px",
                "height": this.args["height"] + "px"
            });
            util.renderCss(this.content, { // 渲染整体大小的同时需要渲染框体位置的改变
                "margin-top": -this.args["height"] / 2 + "px",
                "margin-left": -this.args["width"] / 2 + "px"
            });

            // title内容显示
            if (this.args["title"]["height"] == 0) {
                inner.removeChild(title);
            } else {
                title.innerHTML = this.args["title"]["content"];
                util.renderCss(title, {
                    "color": this.args["title"]["color"],
                    "background": this.args["title"]["background"],
                    "height": this.args["title"]["height"] + "px",
                    "line-height": this.args["title"]["height"] + "px"
                });
            }

            // 内容区显示部分
            wrap.innerHTML = this.args["main"]["content"]; // 可以是html代码嵌入
            util.renderCss(wrap, {
                "top": this.args["title"]["height"] + "px",
                "text-align": this.args["main"]["align"],
                "font-size": this.args["main"]["font"],
                "background": this.args["main"]["background"],
                "color": this.args["main"]["color"]
            })

            // buttons
            if (this.args.buttons.length == 1) {
                group.innerHTML = '<div class="button-block button">' + this.args.buttons[0]["name"] + '</div>';
            } else if (this.args.buttons.length == 2) {
                group.innerHTML = '<div class="button-one button">' + this.args.buttons[0]["name"] +
                    '</div><div class="button-two button">' + this.args.buttons[1]["name"] + '</div>';
            }
            var button = this.buttons = group.querySelectorAll(".button");
            for (var i = 0; i < button.length; i++) {
                (function(i) {
                    util.renderCss(button[i], {
                        "color": _this.args.buttons[i]["color"],
                        "background": _this.args.buttons[i]["background"]
                    });
                    var obj = _this.args.buttons[i];
                    if (_this.args.buttons[i]["click"]) {
                        button[i].addEventListener("tap", function() {
                            obj["click"]();
                            _this.hide(_this.mask, _this.content)
                        }, false);
                    } else if (_this.args.buttons[i]["touchstart"]) {
                        button[i].addEventListener("touchstart", function() {
                            obj["touchstart"]();
                            _this.hide(_this.mask, _this.content)
                        }, false);
                    } else if (_this.args.buttons[i]["touchend"]) {
                        button[i].addEventListener("touchend", function() {
                            obj["touchend"]();
                            _this.hide(_this.mask, _this.content)
                        }, false);
                    }
                })(i)
            }
        },
        show: function() {
            var _this = this;
            _this.mask.style.display = "block";
            _this.content.style.display = "block";
            _this.mask.classList.add("mask-fadein");
            _this.content.classList.add("fadein");
            _this.mask.addEventListener("webkitAnimationEnd", function() {
                _this.mask.style.opacity = "0.7";
                _this.content.style.opacity = "1";
            })
        },
        hide: function(mask, content) {
            var that = this;
            mask.classList.add("mask-fadeout");
            content.classList.add("fadeout");
            mask.addEventListener("webkitAnimationEnd", function() {
                mask.style.display = "none";
                content.style.display = "none";
                mask.classList.remove("mask-fadeout");
                content.classList.remove("fadeout");
                mask.style.opacity = "0";
                content.style.opacity = "0";
                mask.removeEventListener("webkitAnimationEnd", arguments.callee)
                that.deleteNode();
            })
        },
        active: function(node) {
            node.classList.add("tap-active")
        },
        // 处理节点
        deleteNode : function(){
            this.mask.parentNode.removeChild(this.mask);
            this.content.parentNode.removeChild(this.content);
        }
    };


    var util = {
        // 合并参数
        extend: function(old, opt) {
            var newopt = opt;
            var oldopt = old;
            for (var name in newopt) {
                if (typeof oldopt[name] != "boolean" && oldopt[name]) {
                    if (typeof newopt[name] === "object" && !Array.isArray(newopt[name])) {
                        arguments.callee(oldopt[name], newopt[name])
                    } else if (Array.isArray(newopt[name])) {
                        for (var i = 0; i < newopt[name].length; i++) {
                            if (typeof newopt[name][i] === "object" && !Array.isArray(newopt[name][i])) {
                                if (oldopt[name].length == newopt[name].length) {
                                    arguments.callee(oldopt[name][i], newopt[name][i])
                                } else if(newopt[name].length == 1) {
                                    oldopt[name].splice(1, 1) // 删除当前默认节点对象
                                    arguments.callee(oldopt[name][0], newopt[name][0])
                                } else if (oldopt[name].length == 1 && newopt[name].length == 2) {
                                    var temp = newopt[name][1];
                                    var demo = {
                                        name: "取消",
                                        background: "#f6ccc2",
                                        color: "#d64541",
                                        click: function() {
                                            return true;
                                        },
                                        touchstart: function() {
                                            return true;
                                        },
                                        touchend: function() {
                                            return true;
                                        }
                                    }
                                    var tempobj = arguments.callee(demo, temp)
                                    oldopt[name].push(tempobj)
                                }
                            }
                        }
                    } else {
                        oldopt[name] = newopt[name]
                    }
                } else if(typeof oldopt[name] == "boolean"){
                    oldopt[name] = newopt[name]
                }
            }
            return oldopt;
        },
        // 渲染css工具函数
        renderCss: function(obj, options) {
            for (var name in options) {
                obj.style[name] = options[name];
            }
        },
        // 深拷贝复制
        simplyDeepCopy : function(obj){
            var objstr = JSON.stringify(obj);
            var temp = JSON.parse(objstr);
            return temp;
        }
    };

    // 闭包中暴露出该函数
    global.Popup = Popup;
});

使用的方法：

　　　　　　var options = {
                width : 300,
                height : 170,
                title : {
                    height : 40,
                    content : "提示",
                    color : "#5f5d5d",
                    background : "#d1d1d1"
                },
                main : {
                    content : "",
                    align : "left",
                    background : "#ff979696",
                    font : "1em",
                    color : "#555"
                },
                buttons : [{
                    name : "确定",
                    background : "#c4e8da",
                    color : "#26a65b",
                    click : function(){ console.log("click")},
                    tap : function(){ console.log("tap") },
                    touchstart : function(){ return true},
                    touchend : function(){ return true;}
                },{
                    name : "取消",
                    background : "#f6ccc2",
                    color : "#d64541",
                    click : function(){ return true; },
                    touchstart : function(){ return true;},
                    touchend : function(){ return true;}
                }]
            }
            
            document.getElementById("id1").addEventListener("tap", function(){
                options.main.content = "<div class='popup-input-wrap'>\
                                            <input type='number' maxlength='20' placeholder='please enter your password' class='input-withdraw'/>\
                                        </div>";
　　　　　　　　　options.buttons[0]["name"] = "按钮1";
　　　　　　　　　options.buttons[0].click = function(){
　　　　　　　　　　　// 此处写第一按钮需要处理的逻辑代码 
　　　　　　　　　}

　　　　　　　　　options.buttons[1]["name"] = "按钮2";
　　　　　　　　　options.buttons[1].click = function(){
　　　　　　　　　　　// 此处写第二按钮需要处理的逻辑代码 
　　　　　　　　　}
                var pop = new Popup(options)
                pop.show();　　　　// 弹出框按照需要手动设置显示
            })
            document.getElementById("id2").addEventListener("tap", function(){
                options.main.content = "chasldkfjalskjdflk"

　　　　　　　　　options.buttons[0]["name"] = "按钮1";
　　　　　　　　　options.buttons[0].click = function(){
　　　　　　　　　　　// 此处写第一按钮需要处理的逻辑代码 
　　　　　　　　　}

　　　　　　　　　options.buttons[1]["name"] = "按钮2";
　　　　　　　　　options.buttons[1].click = function(){
　　　　　　　　　　　// 此处写第二按钮需要处理的逻辑代码 
　　　　　　　　　}
                var pop1 = new Popup(options)
                pop1.show();
            })

内容区可以自定义一些html代码加上相关的css样式即可，菜鸟初次写插件，望大神指点。

PS: 此插件存在各种BUG，各种问题，请谨慎使用。