【詳解】模態框（modal）的使用 - bootStrap4常用CSS筆記

 模態框由二類元素組成：

1、觸發元素

2、模態框元素

一、定義模態框觸發元素(以button為例)：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">打開模態框</button>

 

二、定義模態框元素：

  <div id="modal-1" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content" >
        <div class="modal-header">
          <div class="modal-title">這是一個標題</div>
          <button class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          內容區域
        </div>
        <div class="modal-footer">
          <button type="button" class="btn" data-dismiss="modal">關閉</button>
        </div>
      </div>
    </div>
  </div> 

注意：

1) 一定要給模態框加上 tabindex="-1" 屬性

2) 默認模態框是四個圓角，給模態框去掉圓形邊角，示例：<div class="modal-content rounded-0">

3) 模態框支持以下二種屬性：

data-keyboard = "[true | false]"	默認值true，表示按ESC鍵可以關閉模態框
data-backdrap = "[true | false]"	默認值true，表示顯示灰色背景，同時點擊背景可以關閉模態框

4) 模態框方法：

 $obj.modal({
  .backdrap = true | false , // 等同於data-backdrop 3   .keyboard = true | false // 等同於data-keyboard 4 });

$obj.modal( 'show | hide | toggle ');
// show 調用顯示模態框
// hide 調用隱藏模態框
// toggle 模態框顯示則隱藏，否之顯示

5) 模態框事件：

show.bs.modal	模態框准備顯示前
shown.bs.modal	模態框完全顯示
hide.bs.modal	模態框准備隱藏前
hidden.bs.modal	模態框隱藏之后

 

bootStrap4，取消了模板框的data-remote屬性，及loaded.bs.modal事件。