<!DOCTYPE html> <head> <meta charset="utf-8"> <title>js confirm弹出框自定义样式</title> <style> html,body { margin: 0; padding: 0; font-family: "Microsoft YaHei"; } .wrap-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 16px; text-align: center; background-color: rgba(0, 0, 0, .4); z-index: 999; } .dialog { position: relative; margin: 15% auto; width: 300px; background-color: #FFFFFF; } .dialog .dialog-header { height: 20px; padding: 10px; background-color: lightskyblue; } .dialog .dialog-body { height: 30px; padding: 20px; } .dialog .dialog-footer { padding: 8px; background-color: whitesmoke; } .btn { width: 70px; padding: 2px; } .hide { display: none; } .ml50 { margin-left: 50px; } </style> </head> <body > <input type="button" value="删除" class="btn ml50" id="remove"> <div class="wrap-dialog hide"> <div class="dialog"> <div class="dialog-header"> <span class="dialog-title">删除确认</span> </div> <div class="dialog-body"> <span class="dialog-message">你确认删除此条信息?</span> </div> <div class="dialog-footer"> <input type="button" class="btn" id="confirm" value="确认" /> <input type="button" class="btn ml50" id="cancel" value="取消" /> </div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ console.log("jquery ..."); $('#remove').click(function(){ var message = "你确认删除此条信息??"; dialogBox(message, function () { console.log("confirmed"); // do something }, function(){ console.log("canceled"); // do something } ); }); }); function dialogBox(message, yesCallback, noCallback){ if(message){ $('.dialog-message').html(message); } // 显示遮罩和对话框 $('.wrap-dialog').removeClass("hide"); // 确定按钮 $('#confirm').click(function(){ $('.wrap-dialog').addClass("hide"); yesCallback(); }); // 取消按钮 $('#cancel').click(function(){ $('.wrap-dialog').addClass("hide"); noCallback(); }); } </script> </html>