jquery重写confirm.

 忙忙碌碌中度日，许久不更新了，工作是一方面，偷懒是一方面。今天碰到一个问题，因为项目需要，要重新修改公共样式，所以，我需要负责的是微信端弹出样式的修改。对于浏览器来说confirm是在确认后去触发的，所以在对其修改的时候也要考虑到后续行为，通常在这里做处理的时候是比较难做的，因为confirm在弹出后会对js进行暂停操作，点击确认之后才会去触发后面的操作。

通常，我们的用法是这样的，if(confirm('确认要操作吗？')){...这里就是确认之后要做的事}
因为confirm显示的比较难看，所以就重新写了模拟框出来，首先是html部分。

<!-- 弹出层，置灰 -->
<div id="mask"></div>
<!-- 确认信息弹出层 -->
<div id="confirmDiv" class="box01">
    <div class="font01" id="confirmMsg"></div>
    <div class="butbox">
        <a href="javascript:;">
            <div class="but02 ok" id="btnok">确定</div>
        </a>
        <a href="javascript:;">
            <div class="but03 cancel">取消</div>
        </a>
    </div>
</div>

css样式部分

#mask {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #555;
    opacity: 0.2;
    z-index: 9999998;
}
.box01 {
    display: none;
    width: 70%;
    height: 160px;
    position: fixed;
    left: 15%;
    top: 50%;
    margin-top: -80px;
    background-color: #FFF;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 20px #999;
    -moz-box-shadow: 0 0 20px #999;
    -webkit-box-shadow: 0 0 20px #999;
    z-index: 9999999;
}
.font01 {
    margin: 16px 4%;
    font-size: 14px;
    color: #808080;
    line-height: 26px;
    letter-spacing: 1px;
    font-family: "微软雅黑";
    text-align: center;
}
.butbox {
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    border-top: 1px #e5e5e5 solid;
    padding-top: 16px;
}
.but01 {
    width: 90%;
    height: 40px;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #0ab;
    color: #FFF;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    float: left;
    font-family: "微软雅黑";
}
.but01:hover {
    background-color: #0096aa;
}
.but02 {
    width: 40%;
    height: 40px;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #0ab;
    color: #FFF;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    float: left;
}
.but02:hover {
    background-color: #0096aa;
}
.but03 {
    width: 40%;
    height: 40px;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #0ab;
    color: #666;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    float: left;
}
.but03:hover {
    border: 1px solid #85dadf;
}

js部分

// 显示确认信息提示框
$(function(){
    window.showConfirm = showConfirm;
    //关键代码
    function showConfirm(msg){
      var cancel_callback = function(){};
      var ok_callback = function(){};
      var result = {
          cancel:function(callback){cancel_callback=callback;return result;},
          ok:function(callback){ok_callback=callback;return result;}
      }
      $("#confirmDiv").find('#confirmMsg').text(msg);
      $("#confirmDiv").find('.cancel').off().on("click", function(){
          $("#confirmDiv").css("display","none");
          cancel_callback();
      });
      $("#confirmDiv").find('.ok').off().on("click", function(){
          $("#confirmDiv").css("display","none");
          ok_callback();
      });
      setTimeout(function(){
          $("#confirmDiv").css("display","block");
          $("#mask").css("display","block");
      },0);
      return result;
    }
    
});

// 关闭确认提示框
function closeConfirmDiv(){
    $("#confirmDiv").css("display","none");
    $("#mask").css("display","none");
}

js调用部分

showConfirm('确认吗').ok(function(){
            alert('确认');
        }).cancel(function(){
            alert('取消');
    });