JS通用弹窗，确定,取消可以回调方法。 

 1 <html>
 2 <head>
 3     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 4     <style>
 5     /* 首页弹出层 */
 6     .confirm-tips{width:100%; height:100%; background:url(apher.png); position:fixed; top:0; z-index:999999999;overflow: auto;}
 7     .confirm-tips-box{width:500px; height:334px; background:#FFF; position:absolute;top:25%;}
 8     .confirm-tips-box h2{display:block; margin-top:50px; text-align:center; font-size:36px; font-weight:normal; color:#3881eb;}
 9     .confirm-tips-box p{font-size:20px; color:#757c8a; text-align:center; display:block; margin-top:36px;}
10     .autobut a.submissionqx{display:inline-block; width:188px; height:60px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #3881eb; text-align:center; line-height:60px; color:#3881eb; margin:0 auto; margin-top:60px; margin-bottom:50px; margin-left:45px; margin-right:30px;}
11     .autobut a.submission{display:inline-block; width:188px; height:60px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; background:#3881eb; text-align:center; line-height:60px; color:#FFF; margin:0 auto; margin-top:60px; margin-bottom:50px;}
12 </style>
13 </head>
14 <body>
15 <input id='alter_btn' type='button' value='弹窗确定取消按钮'/>
16 <span id='msg'></span>
17 <script>
18 /**
19  * 共用弹窗 确定 取消按钮
20  * eg: option = {
21  *     title:'标题',
22  *     msg:'内容',
23  *     confirm:function(){
24  *         点击确定执行的方法
25  *     },
26  *     cancel:function(){
27  *         点击取消执行的方法
28  *     }
29  * }
30  * eg: $.confirm_tips(option);
31  * @param obj
32  */
33 $.confirm_tips = function(obj){
34     if(obj && obj.msg != ''){
35         if(!obj.title){
36             obj.title = '系统提示';
37         }
38         var left = parseFloat(($(document).width()-500)/2);
39         var tips_html = '<div class="confirm-tips confirm-tips-common" >' +
40             '<div class="confirm-tips-box" style="left:'+left+'px;">\n' +
41             '        <h2>'+obj.title+'</h2>\n' +
42             '        <p style="padding: 0 15px">'+obj.msg+'</p>\n' +
43             '        <div class="autobut">\n' +
44             '        <a href="javascript:;" class="submissionqx confirm-tips-cancelbtn">取消</a>\n' +
45             '        <a href="javascript:;" class="submission confirm-tips-confirmbtn">确定</a>\n' +
46             '        </div>\n' +
47             '    </div></div>';
48         if($('.confirm-tips-common').length <= 0){
49             $('body').append(tips_html);
50         }
51         $('.confirm-tips-confirmbtn').click(function(){
52             if(obj.confirm){
53                 obj.confirm();
54             }
55             $('.confirm-tips-common').remove();
56             $('.confirm-tips-confirmbtn').unbind();
57         })
58         $('.confirm-tips-cancelbtn').click(function(){
59             if(obj.cancel){
60                 obj.cancel();
61             }
62             $('.confirm-tips-common').remove();
63             $('.confirm-tips-cancelbtn').unbind();
64         })
65     }
66 }
67 
68 $('#alter_btn').click(function(){
69     var option = {
70         title:'标题',
71         msg:'内容',
72         confirm:function(){
73             $('#msg').text('确定');
74         },
75         cancel:function(){
76             $('#msg').text('取消');    
77         }
78     };
79     $.confirm_tips(option);
80 })
81 </script>
82 </body>
83 </html>

 

posted @ 2018-10-11 11:36  laushow  阅读(2834)  评论(0)    收藏  举报