手机移动端confirm替换方案

最新推荐文章于 2025-08-19 19:07:48 发布

weixin_30892037

最新推荐文章于 2025-08-19 19:07:48 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/skmtpsh/p/4633835.html

本文介绍了弹窗组件的设计与实现过程，包括弹窗的基本结构、样式设置、事件绑定及关闭逻辑，旨在提供一个可复用的弹窗解决方案。

//弹框
;(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 */

转载于:https://www.cnblogs.com/skmtpsh/p/4633835.html