<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<!--
不要在一个模态框上重叠另外一个模态框，要想同时支持多个模态框，需要自己写额外的代码来实现
-->
<!-- 一定要将模态框的HTML代码放在文档的最高层内（尽量作为body标签的直接子元素），以避免其他组件影响模态框的展现和功能
-->
<!-- fade 进入的透明度的一个变化 -->
<!-- data-backdrop="static" 点击周围的遮罩不起作用 必须点击关闭按钮 -->
<div id="mymodal" class="modal fade bs-example-modal-sm" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- 模态框的标题 -->
<div class="modal-header">
<!-- 关闭按钮 -->
<!-- data-dismiss="modal" 必须要和data-toggle="modal"对应 data-是boostrap的一等api -->
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">我是标题</h4>
</div>
<!-- 是模态框的主体的内容 -->
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary btn-toggle">确定</button>
</div>
</div>
</div>
</div>
<!-- data-target="#mymodal" 要和模态框的id对应 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">点击按钮触发弹框2</button>
<a href="#mymodal" class="btn btn-primary" data-toggle="modal">点击按钮触发弹框2</a>
<button class="btn btn-primary btn-tongyi">我同意你打开你才能打开</button>
<button class="btn btn-primary btn-luoji">通过一些逻辑打开</button>
<script src="./js/jquery-1.12.4.js"></script>
<script src="./js/bootstrap.js"></script>
<script>
let flag = false;
$('.btn-tongyi').click(function () {
flag = true;
})
$('.btn-luoji').click(function () {
if (flag) {
$('.modal').modal('show');
flag = false;
}
})
$('.btn-toggle').click(function () {
/*toggle可以控制模态框的显示和隐藏 */
/* $('.modal').modal('toggle') */
$('.modal').modal('hide')
})
$('.modal').on('show.bs.modal',function(){
console.log('show 方法调用之后立即触发该事件')
/* 模拟的ajax请求 */
/* setTimeout(() => {
$('.modal-body').html('<h1>我是body内容</h1>')
}, 1000) */
})
/* $('.modal').on('shown.bs.modal', function () {*/
/* console.log('此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。') */
/*}) */
/* $('.modal').on('hide.bs.modal',function(){
console.log('hide 方法调用之后立即触发该事件')
})
$('.modal').on('hidden.bs.modal',function(){
console.log('此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发')
}) */
</script>
</body>
</html>
