核心提示：情景再现：1、用户点击按钮，弹出确认窗体2、用户确认和取消有不同的处理解决方案：1、采用ES6的promise语法，实现异步回调（jquery3.0以后支持）2、案例样式采用bootstrap上代码：...
情景再现：
1、用户点击按钮，弹出确认窗体
2、用户确认和取消有不同的处理
解决方案：
1、采用ES6的promise语法，实现异步回调（jquery3.0以后支持）
2、案例样式采用bootstrap
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm重写</title>
<link rel="stylesheet" href="bootstrap3.3.5.min.css" />
<style type="text/css">
.console-show {
margin-top: 200px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<p class="text-center">
<h1>confirm重写</h1>
<button type="button" class="btn btn-info" id="confirmBtn">Confirm</button>
<button type="button" class="btn btn-danger" id="alertBtn">Alert</button>
<p class="console-show"></p>
</p>
<!--下面是模态框-->
<p class="modal fade" id="alertModal">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"></h4>
</p>
<p class="modal-body">
<p></p>
</p>
<p class="modal-footer">
<button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定</button>
</p>
</p>
<!-- /.modal-content -->
</p>
<!-- /.modal-dialog -->
</p>
<!-- /.modal -->
<!--下面是模态框-->
<p class="modal fade" id="confirmModal">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"></h4>
</p>
<p class="modal-body">
<p></p>
</p>
<p class="modal-footer">
<button type="button" class="btn btn-default cancelBtn" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定</button>
</p>
</p>
<!-- /.modal-content -->
</p>
<!-- /.modal-dialog -->
</p>
<!-- /.modal -->
</body>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.5.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function ReAlert(title, content) {
var alertPromise = new Promise(function(resolve, reject){
$('#alertModal .modal-title').text(title);
$('#alertModal .modal-body p').text(content);
$('#alertModal').modal('show');
$('#alertModal .sureBtn').off('click').click(function() {
resolve(content);
})
})
return alertPromise;
};
function ReConfirm(title, content) {
var confirmPromise = new Promise(function(resolve, reject){
$('#confirmModal .modal-title').text(title);
$('#confirmModal .modal-body p').text(content);
$('#confirmModal').modal('show');
$('#confirmModal .sureBtn').off('click').click(resolve);
$('#confirmModal .cancelBtn').off('click').click(reject);
})
return confirmPromise;
};
$('#alertBtn').click(function() {
ReAlert('提示', '确定加入索尼大法？').then(function(str){
console.log(str);
$('.console-show').text('Prmoise_alert页面点击"确定"');
})
});
$('#confirmBtn').click(function() {
ReConfirm("警告", '确认退出索尼教？').then(function(){
console.log('确定被点击，执行后续操作');
$('.console-show').text('Promise_resolve_confirm页面点击"确定"');
},function(){
console.log("取消被点击，返回之前的操作");
$('.console-show').text('Promise_reject_confirm页面点击"取消"');
})
})
</script>
</html>
