模拟框

<!-- 一定要将模态框的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">&times;</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>