了解引導模式-css教學-PHP中文網

Understanding Bootstrap Modals

Bootstrap 模態框：輕量級、可定制的彈出窗口

Bootstrap 模態框是一個輕量級、可定制且響應式的 jQuery Bootstrap 插件，用於顯示警報彈出窗口、視頻、圖像等等。它分為三個部分：標題、主體和頁腳，每個部分都有其獨特的作用。無需編寫 JavaScript 代碼，因為所有代碼和样式都由 Bootstrap 預定義。

關鍵特性：

輕量級且響應式： 模態框設計簡潔，並在各種設備上都能良好顯示。
高度可定制： 您可以輕鬆調整大小、添加動態內容，甚至使其可滾動。
無需 JavaScript 代碼： Bootstrap 預定義了所有必要的代碼和样式。
豐富的事件支持： 您可以使用jQuery 的.on() 方法綁定各種事件，例如show.bs.modal、shown.bs.modal、hide.bs.modal 和hidden.bs.modal，從而實現更精細的控制。
可阻止外部點擊關閉： 通過設置 backdrop 選項為 'static'，您可以阻止用戶點擊模態框外部將其關閉。

模態框結構：

默認的 Bootstrap 模態框如下所示：

Understanding Bootstrap Modals

觸發模態框：

您可以使用鏈接或按鈕來觸發模態框。觸發元素的標記可能如下所示：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a>

登入後複製

請注意，鏈接元素有兩個自定義數據屬性：data-toggle 和 data-target。 data-toggle 告訴 Bootstrap 執行什麼操作，data-target 告訴 Bootstrap 要打開哪個元素。因此，每當點擊這樣的鏈接時，ID 為“basicModal”的模態框就會出現。

模態框代碼：

以下是定義模態框本身所需的標記：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

登入後複製

模態框的父 div 應該與上面觸發元素中使用的 ID 相同。在本例中，它是 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal。 aria-labelledby 和 aria-hidden 屬性用於輔助功能，建議保留。

調整模態框大小：

您可以通過向 .modal-dialog div 添加修飾符類來更改模態框的大小：modal-lg（大型模態框）或 modal-sm（小型模態框）。

使用 jQuery 激活模態框：

您可以使用 jQuery 的 .modal() 函數來控制模態框：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a>

登入後複製

options 是一個 JavaScript 對象，用於自定義行為，例如：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

登入後複製

其他可用選項包括：keyboard、show 和 focus。

Bootstrap 模態框事件：

您可以使用 jQuery 的 .on() 方法綁定各種事件來進一步自定義 Bootstrap 模態框的行為。

總結：

Bootstrap 模態框是 Bootstrap 提供的最佳插件之一。對於新手設計師來說，這是在彈出窗口中加載內容而無需編寫任何 JavaScript 代碼的最佳方法之一。

(以下為FAQ部分，已根據原文進行改寫和精簡)

常見問題 (FAQ)：

Bootstrap 模態框的用途是什麼？ 用於創建彈出窗口顯示信息，而無需用戶離開當前頁面，常用於顯示表單、圖像或產品詳細信息。
如何使用 JavaScript 觸發 Bootstrap 模態框？ 使用 .modal('show') 方法，例如 $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');。
如何使用 JavaScript 關閉 Bootstrap 模態框？ 使用 .modal('hide') 方法，例如 $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('hide');。
如何自定義 Bootstrap 模態框的外觀？ 可以使用類名（如 .modal-lg、.modal-sm、Bootstrap 顏色類）進行自定義。
可以在同一頁面上使用多個模態框嗎？ 可以，但一次只能顯示一個。
如何向 Bootstrap 模態框添加動畫？ 可以使用 CSS 或 JavaScript 庫（如 animate.css）。
如何向 Bootstrap 模態框加載動態內容？ 可以使用 AJAX。
如何使 Bootstrap 模態框可滾動？ 使用 .modal-dialog-scrollable 類。
如何防止用戶點擊外部關閉 Bootstrap 模態框？ 設置 backdrop 選項為 'static'。
Bootstrap 模態框是否支持移動設備？ 支持，且響應式。

以上是了解引導模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！