<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm重写</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style type="text/css">
.console-show {
margin-top: 200px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div 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>
<div class="console-show"></div>
</div>
<!--下面是模态框-->
<div class="modal fade" id="alertModal">
<div class="modal-dialog">
<div class="modal-content">
<div 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>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger sureBtn" data-dismiss="modal">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--下面是模态框-->
<div class="modal fade" id="confirmModal">
<div class="modal-dialog">
<div class="modal-content">
<div 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>
</div>
<div class="modal-body">
<p></p>
</div>
<div 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>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function ReAlert(title, content, Func) {
$('#alertModal .modal-title').text(title);
$('#alertModal .modal-body p').text(content);
$('#alertModal').modal('show');
$('#alertModal .sureBtn').off('click').click(function() {
Func(content);
})
};
function ReConfirm(title, content, Func) {
$('#confirmModal .modal-title').text(title);
$('#confirmModal .modal-body p').text(content);
$('#confirmModal').modal('show');
$('#confirmModal .sureBtn').off('click').click(function() {
Func(true);
});
$('#confirmModal .cancelBtn').off('click').click(function() {
Func(false);
})
};
$('#alertBtn').click(function() {
ReAlert('提示', '确定加入索尼大法？', function(str) {
console.log(str);
$('.console-show').text('alert页面点击"确定"');
})
});
$('#confirmBtn').click(function() {
ReConfirm("警告", '确认退出索尼教？', function(r) {
if(r) {
console.log('确定被点击，执行后续操作');
$('.console-show').text('confirm页面点击"确定"');
} else {
console.log("取消被点击，返回之前的操作");
$('.console-show').text('confirm页面点击"取消"');
}
})
})
</script>
</html>alert，confirm弹出框重写
猜你喜欢
转载自blog.csdn.net/qq_33619285/article/details/56052011
今日推荐
周排行