JavaScript confirm 自定义风格及功能实现

在网上找了一些弹窗插件，例如bootbox, 功能和动画效果都做的很好，但是很难自定义样式。

项目需要，Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能，但是使用了回调函数，足以实现弹窗对话效果。

效果图：

aaarticlea/png;base64,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" alt="" />

Demo

Code html:

 <div class="wrap-dialog hide">
     <div class="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="btn" id="confirm" value="确认" />
             <input type="button" class="btn ml50" id="cancel" value="取消" />
         </div>
     </div>
 </div>

Code javascript:

 <script>
     $(document).ready(function(){
         console.log("jquery ...");
         $('#remove').click(function(){
             var message = "你确认删除此条信息？？";
             dialogBox(message,
                 function () {
                     console.log("confirmed");
                     // do something
                 },
                 function(){
                     console.log("canceled");
                     // do something
                 }
             );
         });

     });

     function dialogBox(message, yesCallback, noCallback){
         if(message){
             $('.dialog-message').html(message);
         }
         // 显示遮罩和对话框
         $('.wrap-dialog').removeClass("hide");
         // 确定按钮
         $('#confirm').click(function(){
             $('.wrap-dialog').addClass("hide");
             yesCallback();
         });
         // 取消按钮
         $('#cancel').click(function(){
             $('.wrap-dialog').addClass("hide");
             noCallback();
         });
     }
 </script>

完整代码：

 <!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: 15% auto;
         width: 300px;
         background-color: #FFFFFF;
     }
     .dialog .dialog-header {
         height: 20px;
         padding: 10px;
         background-color: lightskyblue;
     }
     .dialog .dialog-body {
         height: 30px;
         padding: 20px;
     }
     .dialog .dialog-footer {
         padding: 8px;
         background-color: whitesmoke;
     }
     .btn {
         width: 70px;
         padding: 2px;
     }
     .hide {
         display: none;
     }
     .ml50 {
         margin-left: 50px;
     }
 </style>
 </head>
 <body >
 <input type="button" value="删除" class="btn ml50" id="remove">
 <div class="wrap-dialog hide">
     <div class="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="btn" id="confirm" value="确认" />
             <input type="button" class="btn ml50" id="cancel" value="取消" />
         </div>
     </div>
 </div>
 </body>
 <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
 <script>
     $(document).ready(function(){
         console.log("jquery ...");
         $('#remove').click(function(){
             var message = "你确认删除此条信息？？";
             dialogBox(message,
                 function () {
                     console.log("confirmed");
                     // do something
                 },
                 function(){
                     console.log("canceled");
                     // do something
                 }
             );
         });

     });

     function dialogBox(message, yesCallback, noCallback){
         if(message){
             $('.dialog-message').html(message);
         }
         // 显示遮罩和对话框
         $('.wrap-dialog').removeClass("hide");
         // 确定按钮
         $('#confirm').click(function(){
             $('.wrap-dialog').addClass("hide");
             yesCallback();
         });
         // 取消按钮
         $('#cancel').click(function(){
             $('.wrap-dialog').addClass("hide");
             noCallback();
         });
     }
 </script>
 </html>