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>