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

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

JS部分

    //自定义prompt
    myPrompt : function(desV,value,titleV,btnArray,func) {
        myCommon.openMask();
        // <div id="myPrompt">
        //     <p class="prompt-title">titleV</p>
        //     <p class="prompt-des">desV</p>
        //     <input type="text" class="textVa" value=""/>
        //     <div class="pBtnWrap">
        //         <span id="cancel">取消</span>
        //         <span id="confirm">确定</span>
        //     </div>
        // </div>
        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();
        // <div id="myPrompt">
        //     <p class="prompt-title">titleV</p>
        //     <p class="prompt-des">desV</p>
        //     <div class="pBtnWrap">
        //         <span id="cancel">取消</span>
        //         <span id="confirm">确定</span>
        //     </div>
        // </div>
        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();
        // <div id="myPrompt">
        //     <p class="prompt-title">titleV</p>
        //     <p class="prompt-des">desV</p>
        //     <div class="pBtnWrap">
        //         <span id="cancel">取消</span>
        //         <span id="confirm">确定</span>
        //     </div>
        // </div>
        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*/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容