手機移動端confirm替換方案

標籤：

//彈框;(function () {     var ConfirmBox = function (options){        this.defaults = {            title:"",            topT:"提示",            btnOk:"確定",            btnNo:"取消",            btnConfirm:"",            callback:null        },        this.options = $.extend({}, this.defaults, options);    };    ConfirmBox.prototype = {        constructor: ConfirmBox,        boxOpen:function(){            var teml = "";            teml=teml+‘<div id="opp">‘;            teml=teml+‘<div class="opBox js-opBox">‘;            teml=teml+‘    <div class="opBoxHead"><i class="icon f16">x</i> ‘+this.options.topT+‘</div>‘;            teml=teml+‘    <div class="opBoxCont">‘;            teml=teml+‘        <p id="#msgC">‘+this.options.title+‘</p>‘;            teml=teml+‘    </div>‘;            teml=teml+‘    <div class="opBoxBot disbox">‘;            if(this.options.btnConfirm!=""){                teml=teml+‘        <a href="javascript:;" class="btn-ok">‘+this.options.btnConfirm+‘</a>‘;            }else{                teml=teml+‘        <a href="javascript:;" class="disbox-1 btn-cancel">‘+this.options.btnNo+‘</a><a href="javascript:;" class="disbox-1 btn-ok">‘+this.options.btnOk+‘</a>‘;            }            teml=teml+‘    </div>‘;            teml=teml+‘</div>‘;            teml=teml+‘<div class="mybg js-mybg" style="display:block;z-index:2200"></div>‘;            teml=teml+‘</div>‘;                        if($(".js-opBox").length===0){                $("body").append(teml);            }else{                $(".js-opBox #msgC").html(this.options.title);            }            this.bindEvent();        },        bindEvent:function(){            var that = this;            $(".btn-ok").on("click",function(){                if(typeof (that.options.callback)=="function"){                    that.options.callback();                }            });            $(".btn-cancel").on("click",function(){                that.boxClose();            });                },        boxClose:function(){            $("#opp").remove()        }    };    window.ConfirmBox = ConfirmBox;}()); 

 /* opBox { */
.opBox {width:80%; padding:1rem 1rem 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;  position:fixed; top:50%; left:50%; z-index:2300; background:#fff; border-radius:10px;-webkit-border-radius:10px; overflow:hidden; transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); }
.opBox .opBoxHead { border-bottom:2px solid #00ADEB;padding:.5rem 0; font-size:1.6rem; height:1.5rem; line-height:1.5rem; color:#00ADEB; }
.opBox .opBoxCont {padding:1rem 0rem;}
.opBox .opBoxBot {border-top:1px solid #ececec; margin:0px -1rem;}
.opBox .opBoxBot a { display:block; text-align:center; padding:.8rem 0;border-left:1px solid #ececec;color:#00ADEB; }
.opBox .opBoxBot a:first-of-type {border-left:0 none;color:#7F7F7F;}
/* } opBox */

手機移動端confirm替換方案