javascrip 自定义confirm

Posted 2020-10-28 造轮子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascrip 自定义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进制颜色值。

本文结束。

以上是关于javascrip 自定义confirm的主要内容，如果未能解决你的问题，请参考以下文章

js confirm怎么实现自定义标题

JQUERY 自定义confirm，怎么知道用户点击的是确认按钮，还是取消按钮

polymer框架在代码中动态创建需要支持内容分发的自定义元素并挂载到文档中

VSCode自定义代码片段——CSS选择器

在JS中自定义函数并实现类似 $.messager.confirm（title, msg, fn）功能，请附代码。

element-ui组件扩展 - 自定义confirm弹窗