在網上找了一些彈窗插件，例如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>