原生js 自定义confirm

本文参考博客园另一篇文章:https://www.cnblogs.com/hzj680539/p/5374052.html，在此感谢。

在实际开发当中，考虑到原生js组件，包括alert、confirm等的体验较差，很多公司会考虑将这些组件进行重写、疯转。

本文参考的文章里，作者所实现的自定义confirm有一些比较明显缺点，当然也有其优点。

我这篇文章是按照我的设想，对齐进行了改造。

改造点1：在实际应用中，css命名规则容易被其它样式名干扰，所以改造为所有css带有前缀：dialog；代码如下

 1  <style>
 2     html,
 3     body {
 4         margin: 0;
 5         padding: 0;
 6         font-family: "Microsoft YaHei";
 7     }
 8 
 9     .wrap-dialog {
10         position: fixed;
11         top: 0;
12         left: 0;
13         width: 100%;
14         height: 100%;
15         font-size: 16px;
16         text-align: center;
17         background-color: rgba(0, 0, 0, .4);
18         z-index: 999;
19     }
20 
21     .dialog {
22         position: relative;
23         margin: 10% auto;
24         width: 300px;
25         background-color: #FFFFFF;
26     }
27 
28     .dialog .dialog-header {
29         height: 20px;
30         padding: 10px;
31         background-color: #22b9ff;
32     }
33 
34     .dialog .dialog-body {
35         height: 30px;
36         padding: 20px;
37     }
38 
39     .dialog .dialog-footer {
40         padding: 8px;
41         background-color: #f5f5f5;
42     }
43 
44     .dialog-btn {
45         width: 70px;
46         padding: 2px;
47         cursor: pointer;
48     }
49 
50     .dialog-hide {
51         display: none;
52     }
53 
54     .dialog-ml50 {
55         margin-left: 50px;
56     }
57     </style>

改造点2：js的实现，首先不在依赖jquery，其次不采用dom2的addEventLiistener绑定事件，因为经过测试会产生重复绑定问题；

 1 <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
 2 <script>
 3 $(document).ready(function() {
 4     //自定義部分
 5     window.confirm = function(message, yesCallBack, noCallBack) {
 6 
 7         var message = message || "确认删除此条信息?";
 8       
 9         var choose=function(tag){
10             return document.querySelector(tag);
11         }
12        choose(".dialog-message").innerHTML = message;
13         // 显示遮罩和对话框
14        choose(".wrap-dialog").className = "wrap-dialog";
15         // 确定按钮
16 
17        choose("#dialog").onclick= function(e){
18             if(e.target.className=="dialog-btn"){
19                  choose(".wrap-dialog").className = "wrap-dialog dialog-hide";
20                  yesCallBack();
21             }else if (e.target.className=="dialog-btn dialog-ml50"){
22                  choose(".wrap-dialog").className = "wrap-dialog dialog-hide";
23                   noCallBack();
24             }
25         };
26         // 取消按钮
27 
28     }
29     $('#dialog-remove').click(function() {
30         function text() {
31            alert(22);
32         }
33 
34         function ttt() {
35             alert(111);
36         }
37         confirm("确认删除", text, ttt);
38     });
39 
40 
41 
42 });
43 </script>

jquery是用来测试的，哈哈。

改造点3：直接改写原生的confirm，而不是另起名称。也就是window.confirm；

最后是整体代码：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>js confirm弹出框自定义样式</title>
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
        font-family: "Microsoft YaHei";
    }

    .wrap-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        z-index: 999;
    }

    .dialog {
        position: relative;
        margin: 10% auto;
        width: 300px;
        background-color: #FFFFFF;
    }

    .dialog .dialog-header {
        height: 20px;
        padding: 10px;
        background-color: #22b9ff;
    }

    .dialog .dialog-body {
        height: 30px;
        padding: 20px;
    }

    .dialog .dialog-footer {
        padding: 8px;
        background-color: #f5f5f5;
    }

    .dialog-btn {
        width: 70px;
        padding: 2px;
        cursor: pointer;
    }

    .dialog-hide {
        display: none;
    }

    .dialog-ml50 {
        margin-left: 50px;
    }
    </style>
</head>

<body>
    <input type="button" value="删除" class="dialog-btn dialog-ml50" id="dialog-remove">
    //組件html部分
    <div class="wrap-dialog dialog-hide" >
        <div class="dialog" id="dialog">
            <div class="dialog-header">
                <span class="dialog-title">信息确认</span>
            </div>
            <div class="dialog-body">
                <span class="dialog-message">你确认删除此条信息？</span>
            </div>
            <div class="dialog-footer">
                <input type="button" class="dialog-btn" id="dialog-confirm" value="确认" />
                <input type="button" class="dialog-btn dialog-ml50" id="dialog-cancel" value="取消" />
            </div>
        </div>
    </div>
    
</body>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    //自定義部分
    window.confirm = function(message, yesCallBack, noCallBack) {

        var message = message || "确认删除此条信息?";
      
        var choose=function(tag){
            return document.querySelector(tag);
        }
       choose(".dialog-message").innerHTML = message;
        // 显示遮罩和对话框
       choose(".wrap-dialog").className = "wrap-dialog";
        // 确定按钮

       choose("#dialog").onclick= function(e){
            if(e.target.className=="dialog-btn"){
                 choose(".wrap-dialog").className = "wrap-dialog dialog-hide";
                 yesCallBack();
            }else if (e.target.className=="dialog-btn dialog-ml50"){
                 choose(".wrap-dialog").className = "wrap-dialog dialog-hide";
                  noCallBack();
            }
        };
        // 取消按钮

    }
    $('#dialog-remove').click(function() {
        function text() {
           alert(22);
        }

        function ttt() {
            alert(111);
        }
        confirm("确认删除", text, ttt);
    });



});
</script>

</html>

View Code

当然，还可以继续改进，比如html改为动态生成，甚至于css也改为动态。这个有兴趣的可以继续。另外我把css的颜色的字母表示改为16进制颜色值。

本文结束。