自定义弹窗——alert、prompt、confirm

自定义弹窗——alert、prompt、confirm。
openMask closeMask 参见：自定义遮罩和加载中动画

JS部分

    //自定义prompt
    myPrompt : function(desV,value,titleV,btnArray,func) {
        myCommon.openMask();
        // 

        //     
titleV
        //     
desV
        //     
        //     

        //         取消
        //         确定
        //     
        // 
        var cancel = document.createElement("span");
        cancel.id = "cancel";
        
        var confirm = document.createElement("span");
        confirm.id = "confirm";
        
        var pBtnWrap = document.createElement("div");
        pBtnWrap.id = "pBtnWrap";
        pBtnWrap.appendChild(cancel);
        pBtnWrap.appendChild(confirm);
        
        var input = document.createElement("input");
        input.type = "text";
        input.id = "textValue";
        
        var title = document.createElement("p");
        title.id = "promptTitle";
        
        var des = document.createElement("p");
        des.id = "promptDes";
        
        var myPrompt = document.createElement("div");
        myPrompt.id = "myPrompt";
        
        myPrompt.appendChild(title);
        myPrompt.appendChild(des);
        myPrompt.appendChild(input);
        myPrompt.appendChild(pBtnWrap);
        document.getElementById("myMask").appendChild(myPrompt);
        
        var $cancel = $("#cancel");
        $cancel.text(btnArray[1]);
        
        var $confirm = $("#confirm");
        $confirm.text(btnArray[0]);
        
        $pBtnWrap = $("#pBtnWrap");
        
        var $promptTitle = $("#promptTitle");
        $promptTitle.text(titleV);
        var $promptDes = $("#promptDes");
        $promptDes.text(desV);
        var $textValue = $("#textValue");
        $textValue.val(value);
        var $myPrompt = $("#myPrompt");
        $myPrompt.bind( "touchmove", function (e) {
            e.preventDefault();
            if(isIos()){
                window.event.returnValue = false; 
            }           
        });
        
        var dWidth = myCommon.wWidth;
        var dHeight = myCommon.wHeight;
        var iWidth = $myPrompt.width();
        var iHeight = $myPrompt.height();
        var diffW = (dWidth - iWidth) / 2;
        var diffH = (dHeight - iHeight) / 2 - 60;
        $myPrompt.css("top", diffH)
                 .css("left", diffW);
        $confirm.on("tap", function() {
            setTimeout(function() {
                $myPrompt.remove();
                myCommon.closeMask();
                var e = {
                    index : 0,
                    value : $textValue.val()
                };
                if (func) {
                    func(e);
                }
            }, 400);
        });
        $cancel.on("tap", function() {
            setTimeout(function() {
                $myPrompt.remove();
                myCommon.closeMask();
                var e = {index : 1};
                if (func) {
                    func(e);
                }
            }, 400);
        });
    },
    //自定义alert
    myAlert : function(desV,titleV,btnArray,func) {
        myCommon.openMask();
        // 

        //     
titleV
        //     
desV
        //     

        //         取消
        //         确定
        //     
        // 
        var confirm = document.createElement("span");
        confirm.id = "alertConfirm";
        
        var pBtnWrap = document.createElement("div");
        pBtnWrap.id = "pBtnWrap";
        pBtnWrap.appendChild(confirm);
        
        var title = document.createElement("p");
        title.id = "promptTitle";
        
        var des = document.createElement("p");
        des.id = "alertDes";
        
        var myPrompt = document.createElement("div");
        myPrompt.id = "myPrompt";
        
        myPrompt.appendChild(title);
        myPrompt.appendChild(des);
        myPrompt.appendChild(pBtnWrap);
        document.getElementById("myMask").appendChild(myPrompt);
        
        var $alertConfirm = $("#alertConfirm");
        $alertConfirm.text(btnArray[0]);
        
        $pBtnWrap = $("#pBtnWrap");
        $pBtnWrap.css("margin-top", "10px");
        
        var $promptTitle = $("#promptTitle");
        $promptTitle.text(titleV);
        var alertDes = $("#alertDes");
        alertDes.text(desV);
        var $myPrompt = $("#myPrompt");
        $myPrompt.bind( "touchmove", function (e) {
            e.preventDefault();
            if(isIos()){
                window.event.returnValue = false; 
            }
        });
        
        var dWidth = myCommon.wWidth;
        var dHeight = myCommon.wHeight;
        var iWidth = $myPrompt.width();
        var iHeight = $myPrompt.height();
        var diffW = (dWidth - iWidth) / 2;
        var diffH = (dHeight - iHeight) / 2 - 30;
        $myPrompt.css("top", diffH)
                 .css("left", diffW);
        $alertConfirm.on("tap", function() {
            setTimeout(function() {
                $myPrompt.remove();
                myCommon.closeMask();
                var e = {index : 0};
                if (func) {
                    func(e);
                }
            }, 400);
        });
    },
    //自定义confirm
    myConfirm : function(desV,titleV,btnArray,func) {
        myCommon.openMask();
        // 

        //     
titleV
        //     
desV
        //     

        //         取消
        //         确定
        //     
        // 
        var cancel = document.createElement("span");
        cancel.id = "cancel";
        
        var confirm = document.createElement("span");
        confirm.id = "confirm";
        
        var pBtnWrap = document.createElement("div");
        pBtnWrap.id = "pBtnWrap";
        pBtnWrap.appendChild(cancel);
        pBtnWrap.appendChild(confirm);
        
        var title = document.createElement("p");
        title.id = "confirmTitle";
        
        var des = document.createElement("p");
        des.id = "confirmDes";
        
        var myPrompt = document.createElement("div");
        myPrompt.id = "myPrompt";
        
        myPrompt.appendChild(title);
        myPrompt.appendChild(des);
        myPrompt.appendChild(pBtnWrap);
        document.getElementById("myMask").appendChild(myPrompt);
        
        var $cancel = $("#cancel");
        $cancel.text(btnArray[1]);
        
        var $confirm = $("#confirm");
        $confirm.text(btnArray[0]);
        
        $pBtnWrap = $("#pBtnWrap");
        $pBtnWrap.css("margin-top", "10px");
        
        var $confirmTitle = $("#confirmTitle");
        $confirmTitle.text(titleV);
        var $confirmDes = $("#confirmDes");
        $confirmDes.text(desV);
        var $myPrompt = $("#myPrompt");
        $myPrompt.bind( "touchmove", function (e) {
            e.preventDefault();
            if(isIos()){
                window.event.returnValue = false; 
            }
        });
        
        var dWidth = myCommon.wWidth;
        var dHeight = myCommon.wHeight;
        var iWidth = $myPrompt.width();
        var iHeight = $myPrompt.height();
        var diffW = (dWidth - iWidth) / 2;
        var diffH = (dHeight - iHeight) / 2 - 30;
        $myPrompt.css("top", diffH)
                 .css("left", diffW);
        $confirm.on("tap", function() {
            setTimeout(function() {
                $myPrompt.remove();
                myCommon.closeMask();
                var e = {index : 0};
                if (func) {
                    func(e);
                }
            }, 400);
        });
        $cancel.on("tap", function() {
            setTimeout(function() {
                $myPrompt.remove();
                myCommon.closeMask();
                var e = {index : 1};
                if (func) {
                    func(e);
                }
            }, 400);
        });
    }

CSS部分

    /*myPrompt,myConfirm,myAlert——start*/
    #myPrompt {
        width: 250px;
        position: absolute;
        z-index: 1001;
        background-color: #fff;
        border-radius: 5px;
        max-width: 50em;
        background: rgba(250,250,252,1);
        overflow: hidden;
        text-align: center;
    }
    #confirmTitle, #promptTitle {
        font-size: 16px;
        color: #333;
        padding: 0.8em 0 0.8em;
    }
    #confirmDes, #promptDes, #alertDes {
        color: #333;
        padding: 0 20px;
        font-size: 16px;
        word-wrap: break-word;
        word-break: break-all;
        text-align: center;
    }
    #promptDes {
        text-align: left;
    }
    #textValue {
        font-size: 16px;
        color: #333;
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 10px;
        width: 90%;
        margin: 5px auto 15px;
    }
    #pBtnWrap {
        width: 100%;
        text-align: center;
        border-top: 1px solid #ddd;
    }
    #cancel, #confirm, #alertConfirm {
        font-size: 16px;
        display: inline-block;
        width: 48%;
        height: 45px;
        line-height: 45px;
        color: #5E9FE5;
    }
    #cancel {
        color: #EF3838;
        border-right: 1px solid #ddd;
    }
    #alertConfirm {
        width: 100%;
    }
    /*myPrompt,myConfirm,myAlert——end*/