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

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

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

效果图：

Demo

Code html:

 1 <div class="wrap-dialog hide">
 2     <div class="dialog">
 3         <div class="dialog-header">
 4             <span class="dialog-title">删除确认</span>
 5         </div>
 6         <div class="dialog-body">
 7             <span class="dialog-message">你确认删除此条信息？</span>
 8         </div>
 9         <div class="dialog-footer">
10             <input type="button" class="btn" id="confirm" value="确认" />
11             <input type="button" class="btn ml50" id="cancel" value="取消" />
12         </div>
13     </div>
14 </div>

Code javascript:

 1 <script>
 2     $(document).ready(function(){
 3         console.log("jquery ...");
 4         $('#remove').click(function(){
 5             var message = "你确认删除此条信息？？";
 6             dialogBox(message,
 7                 function () {
 8                     console.log("confirmed");
 9                     // do something
10                 },
11                 function(){
12                     console.log("canceled");
13                     // do something
14                 }
15             );
16         });
17 
18     });
19 
20     function dialogBox(message, yesCallback, noCallback){
21         if(message){
22             $('.dialog-message').html(message);
23         }
24         // 显示遮罩和对话框
25         $('.wrap-dialog').removeClass("hide");
26         // 确定按钮
27         $('#confirm').click(function(){
28             $('.wrap-dialog').addClass("hide");
29             yesCallback();
30         });
31         // 取消按钮
32         $('#cancel').click(function(){
33             $('.wrap-dialog').addClass("hide");
34             noCallback();
35         });
36     }
37 </script>

完整代码：

  1 <!DOCTYPE html>
  2 <head>
  3 <meta charset="utf-8">
  4 <title>js confirm弹出框自定义样式</title>
  5 <style>
  6     html,body {
  7         margin: 0;
  8         padding: 0;
  9         font-family: "Microsoft YaHei";
 10     }
 11     .wrap-dialog {
 12         position: fixed;
 13         top: 0;
 14         left: 0;
 15         width: 100%;
 16         height: 100%;
 17         font-size: 16px;
 18         text-align: center;
 19         background-color: rgba(0, 0, 0, .4);
 20         z-index: 999;
 21     }
 22     .dialog {
 23         position: relative;
 24         margin: 15% auto;
 25         width: 300px;
 26         background-color: #FFFFFF;
 27     }
 28     .dialog .dialog-header {
 29         height: 20px;
 30         padding: 10px;
 31         background-color: lightskyblue;
 32     }
 33     .dialog .dialog-body {
 34         height: 30px;
 35         padding: 20px;
 36     }
 37     .dialog .dialog-footer {
 38         padding: 8px;
 39         background-color: whitesmoke;
 40     }
 41     .btn {
 42         width: 70px;
 43         padding: 2px;
 44     }
 45     .hide {
 46         display: none;
 47     }
 48     .ml50 {
 49         margin-left: 50px;
 50     }
 51 </style>
 52 </head>
 53 <body >
 54 <input type="button" value="删除" class="btn ml50" id="remove">
 55 <div class="wrap-dialog hide">
 56     <div class="dialog">
 57         <div class="dialog-header">
 58             <span class="dialog-title">删除确认</span>
 59         </div>
 60         <div class="dialog-body">
 61             <span class="dialog-message">你确认删除此条信息？</span>
 62         </div>
 63         <div class="dialog-footer">
 64             <input type="button" class="btn" id="confirm" value="确认" />
 65             <input type="button" class="btn ml50" id="cancel" value="取消" />
 66         </div>
 67     </div>
 68 </div>
 69 </body>
 70 <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
 71 <script>
 72     $(document).ready(function(){
 73         console.log("jquery ...");
 74         $('#remove').click(function(){
 75             var message = "你确认删除此条信息？？";
 76             dialogBox(message,
 77                 function () {
 78                     console.log("confirmed");
 79                     // do something
 80                 },
 81                 function(){
 82                     console.log("canceled");
 83                     // do something
 84                 }
 85             );
 86         });
 87 
 88     });
 89 
 90     function dialogBox(message, yesCallback, noCallback){
 91         if(message){
 92             $('.dialog-message').html(message);
 93         }
 94         // 显示遮罩和对话框
 95         $('.wrap-dialog').removeClass("hide");
 96         // 确定按钮
 97         $('#confirm').click(function(){
 98             $('.wrap-dialog').addClass("hide");
 99             yesCallback();
100         });
101         // 取消按钮
102         $('#cancel').click(function(){
103             $('.wrap-dialog').addClass("hide");
104             noCallback();
105         });
106     }
107 </script>
108 </html>
View Code

 

posted @ 2016-04-10 14:09  提佰萬  阅读(17946)  评论(1)  编辑  收藏  举报