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(){})