重构alert，confirm

最近写了一个重构的alert，confirm控件，调用时直接使用alert，confirm即可

//调用方法

alert("提示语")

window.confirm('你确定要删除该记录?',function(){
　　//回调函数
})

 

css部分

引入我写的一个基础样式

<link href="http://120.26.59.104/base.css" rel="stylesheet" type="text/css" />

 

.tck-cover{ width:100%; height:100%; position: fixed; top:0; left:0; z-index:1000; background-color:rgba(0,0,0,0.6); display:none;}
.modal-wapper{ width:340px; padding:20px; position:fixed; top:-200%; left:50%; box-shadow:0 0 5px rgba(0,0,0,0.5); z-index:100001; background-color:#fff; border-radius:5px;}

 

 

html部分

在页面底部增加代码

<!-- alert弹框  -->
<div class="modal-wapper clearfix" id="alert">
    <p class="align-right line30 clearfix"><span class="close">X</span></p>
    <p class="text font14 line20 pad10TB"></p>
    <p class="align-right top10">
        
        <a href="javascript:void(0)" class="btns btns-blue btns-small btnsConfirm">确定</a>
    </p>
</div>
<!-- confirm弹框  -->
<div class="modal-wapper clearfix" id="confirm">
    <p class="align-right line30 clearfix"><span class="close">X</span></p>
    <p class="text font14 line20 pad10TB"></p>
    <p class="align-right top10">
        <a href="javascript:void(0)" class="btns btns-blue btns-small btnsConfirm">确定</a>
        <a href="javascript:void(0)" class="btns btns-grey btns-small btnsCancel left20">取消</a>
    </p>
</div>

 

js部分

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

 

//调用部分
window.alert = function (msg) {
    modal.modal($("#alert"),$(".close,#alert .btnsConfirm"),function(){
        $("#alert .text").html(msg);
    })
};
window.confirm = function (msg,callBack) {
    modal.modal($("#confirm"),$(".close,#confirm .btnsCancel"),function(){
        $("#confirm .text").html(msg);
        $("#confirm .btnsConfirm").on("click",function(){
            callBack();
            modal.hide($("#confirm"))
        });
        
    })
};
//模态对话框
var modal = {
    modal:function(b,c,callback){
        $(".modal-wapper").css({"top":"-200%"});
        b.css({"margin-left":-b.width()/2})
        b.animate({"top":"20%"},200);
        $(".tck-cover").fadeIn();
        if($(".tck-cover").length==0){
          $("body").append('<div class="tck-cover"></div>');
          $(".tck-cover").fadeIn();
        };
       $(document).on("click",".tck-cover",function(){
           modal.hide(b);
       })
       if(c){
            c.click(function(){
                modal.hide(b);
            });   
       }
       if(callback){callback()}
    },
    hide:function(b){
          b.animate({"top":"-200%"},200);
          $(".tck-cover").fadeOut(200);
          setTimeout(function(){$(".tck-cover").remove();},200)
    }
};

 

转载于:https://www.cnblogs.com/wangmiao2606/p/4680594.html