<!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>
