bootstrap 组件 之模态框组件

模态框（弹出层）
// 需要使用jq bootstrap.js
使用类名 modal
基本使用方法：
<div class="container">
        <div class="row mt-5">
            //data-taggle 使用这个属性来根默认的bootstrap js 交互 data-target 用于显示的模态框 如果使用的是a标签， 那么使用href即可
            <div class="col"><button class="btn btn-primary" data-taggle='modal' data-target="#modal1">基本模态框</button>
            </div>
        </div>
    </div>
    // 模态框
    <div class="modal fade show" id="modal1">
        // modal-dialog 是模态框内容的父级 用于展示模态框的位置以及大小
        <div class="modal-dialog">
            // modal-content 是模态框的内容 模态框的内容分为3个部分 头 中 尾
            <div class="modal-content">
                // modal-header 模态框的头
                <div class="modal-header">
                    // modal-title 模态框的标题
                    <h5 class="modal-title">标题</h5>
                    // close 模态框右上角的关闭按钮 data-dismiss 用于控制关闭
                    <button class="close" data-dismiss='modal'>
                        <span>&times;</span>
                    </button>
                </div>
                // modal-body 模态框的主体内容
                <div class="modal-boday">
                    模态框的主题内容自由定义
                </div>
                // modal-footer 模态框的尾
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss='modal'>关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    // 垂直居中的模态框
    使用类名 modal-dialog-centered 加在modal-dialog 的后面 才可以生效
    // 模态框中使用栅格系统
    在modal-body 里面使用栅格系统
    // 模态框相同 内容不同 
     1.在按钮中使用 属性data-whatever="content"
     2. js来控制
     $('modal').on('show.bs.modal',function(ev){
         // ev.relatedTarget 这个值为点击的那个button
         // .data('whatever') 获取data-开头的属性的值
     })
     // 模态框的尺寸大小（3个）
     1. 超大尺寸模态框  在modal 后面添加 bd-example-modal-xl 在modal-dialog 后面添加 modal-xl
     2. 大尺寸模态框    在modal 后面添加 bd-example-modal-lg 在modal-dialog 后面添加 modal-lg
     3. 小尺寸模态框    在modal 后面添加 bd-example-modal-sm 在modal-dialog 后面添加 modal-sm
    button上面的data 属性 需要添加在模态框对应的button上面
    data-backdrop="" 默认true 是否显示模态框的遮罩层
    data-keyborad="" 默认true 是否使用esc的按键来关闭模态框, 但是焦点必须放在模态框上才会生效
    data-focus="" 默认为true 是否聚焦
    data-show="" 默认true , 初始化模态框是否需要显示
    模态框方法和事件
    方法：
    通过点击button
    $('').click(function(){
        // 展示
        $('modal').modal('show')
        // 隐藏
        $('modal').modal('hide')
        // 隐藏和显示的切换
        $('modal').modal('toggle')
    })
    事件：
    // 显示的时候触发
    $('modal').on('show.bs.modal',functioon(){})
    // 完全显示的时候触发
    $('modal').on('shown.bs.modal',functioon(){})
    // 隐藏的时候触发
    $('modal').on('hide.bs.modal',functioon(){})
    // 完全隐藏的时候触发
    $('modal').on('hidden.bs.modal',functioon(){})