文章前提

Modal 互動視窗

Modal 互動視窗

CH7 68
課程練習下載
Bootstrap 路徑 : Components / Modal

|Modal 基本結構 Live demo

Bootstrap-Modal-基本架構

  • 複製 modal 結構後,修改時請改 .modal-header , .modal-body, .modal-footer 的內容即可,其他部分不需做修改
  • 加上 data API 啟動 JavaScript → data-target="modal"
  • 彈出的互動式窗使用 data-target 內設定特定 ID ,即指向設定相同 ID 的特定視窗
    • Data-target 內除了使用 ID,也可使用 Class
  • 互動式元件 data-dismiss="modal" 為關掉跳出互動式窗的叉叉。
    • 關掉此互動式窗的方式除了按叉叉外,還可以按後方灰色區塊
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

| Option size 互動視窗尺寸 | 範例

Bootstrap-Modal互動視窗尺寸

  • 互動式窗有三個尺寸 ( sm , lg , xl ) ,放置 .modal-dialog 裡,這些尺寸會做中斷點調整,避免出現水平捲軸
    • .modal-sm , .modal-lg , .modal-xl , 沒寫代表預設尺寸
  • <button>data-target 寫入與對應的互動式窗相同 size 的 Class 或 ID
    • data-target 內除了使用 ID,也可使用 Class
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<!-- Modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">    
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

| Vertically centered 互動視窗垂直置中 | 範例

  • .modal-dialog 加入 .modal-dialog-centered 即可讓互動視窗於版面中垂直置中

資料來源

最後修改日期: 2 4 月, 2020

作者