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;"> ' + 41 ' <h2>'+obj.title+'</h2> ' + 42 ' <p style="padding: 0 15px">'+obj.msg+'</p> ' + 43 ' <div class="autobut"> ' + 44 ' <a href="javascript:;" class="submissionqx confirm-tips-cancelbtn">取消</a> ' + 45 ' <a href="javascript:;" class="submission confirm-tips-confirmbtn">确定</a> ' + 46 ' </div> ' + 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>