原生js 自定義confirm

時間 2019-11-30

原文原文鏈接

本文參考博客園另外一篇文章:https://www.cnblogs.com/hzj680539/p/5374052.html，在此感謝。css

在實際開發當中，考慮到原生js組件，包括alert、confirm等的體驗較差，不少公司會考慮將這些組件進行重寫、瘋轉。html

本文參考的文章裏，做者所實現的自定義confirm有一些比較明顯缺點，固然也有其優勢。jquery

我這篇文章是按照個人設想，對齊進行了改造。dom

改造點1：在實際應用中，css命名規則容易被其它樣式名干擾，因此改造爲全部css帶有前綴：dialog；代碼以下ide

 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是用來測試的，哈哈。spa

改造點3：直接改寫原生的confirm，而不是另起名稱。也就是window.confirm；3d

最後是總體代碼：code

<!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>