Bootstrap - 模態框外掛

上一頁
下一頁

模態框是一個子視窗，覆蓋在其父視窗之上。通常，其目的是顯示來自獨立來源的內容，以便在不離開父視窗的情況下進行互動。子視窗可以提供資訊、互動或更多功能。

如果您想單獨包含此外掛的功能，則需要 modal.js。否則，如章節 Bootstrap 外掛概述 中所述，您可以包含 bootstrap.js 或壓縮的 bootstrap.min.js。

用法

您可以切換模態框外掛的隱藏內容 -

  • 透過資料屬性 - 在控制器元素（如按鈕或連結）上設定屬性 data-toggle = "modal"，以及 data-target = "#identifier" 或 href = "#identifier" 來定位要切換的特定模態框（其 id = "identifier"）。

  • 透過 JavaScript - 使用此技術，您可以用一行 JavaScript 呼叫 id = "identifier" 的模態框 -

$('#identifier').modal(options)

示例

以下示例顯示了一個靜態模態框視窗：-

線上演示 
<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

前面程式碼的詳細資訊 -

  • 要呼叫模態框視窗，您需要某種觸發器。您可以使用按鈕或連結。這裡我們使用了按鈕。

  • 如果您檢視上面的程式碼，您會發現在 <button> 標籤中，data-target = "#myModal" 是您想要在頁面上載入的模態框的目標。此程式碼允許您在頁面上建立多個模態框，然後為每個模態框設定不同的觸發器。現在，需要明確的是，您不會同時載入多個模態框，但您可以在頁面上建立多個模態框，以便在不同時間載入。

  • 模態框中有兩個需要注意的類 -

    • 第一個是 .modal，它只是將 <div> 的內容標識為模態框。

    • 第二個是 .fade 類。當模態框切換時，它將導致內容淡入淡出。

  • aria-labelledby = "myModalLabel"，屬性引用模態框標題。

  • 屬性 aria-hidden = "true" 用於在觸發器出現（例如，單擊關聯按鈕）之前保持模態框視窗不可見。

  • <div class = "modal-header">，modal-header 是定義模態框視窗標題樣式的類。

  • class = "close"，是設定模態框視窗關閉按鈕樣式的 CSS 類 close。

  • data-dismiss = "modal"，是自定義 HTML5 資料屬性。這裡它用於關閉模態框視窗。

  • class = "modal-body"，是 Bootstrap CSS 的 CSS 類，用於設定模態框視窗主體樣式。

  • class = "modal-footer"，是 Bootstrap CSS 的 CSS 類，用於設定模態框視窗頁尾樣式。

  • data-toggle = "modal"，HTML5 自定義資料屬性 data-toggle 用於開啟模態框視窗。

選項

可以透過資料屬性或 JavaScript 傳遞某些選項來自定義模態框視窗的外觀。下表列出了這些選項 -

選項名稱 型別/預設值 資料屬性名稱 描述
backdrop 布林值或字串 'static' 預設值：true data-backdrop 如果不想在使用者單擊模態框外部時關閉模態框，則指定 static 作為背景。
keyboard 布林值 預設值：true data-keyboard 按下 Esc 鍵時關閉模態框；設定為 false 以停用。
show 布林值 預設值：true data-show 初始化時顯示模態框。
remote 路徑 預設值：false data-remote

使用 jQuery 的 .load 方法將內容注入到模態框主體中。如果添加了具有有效 URL 的 href，它將載入該內容。下面顯示了此示例 -

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

方法

以下是一些可與 modal() 一起使用的方法。

方法 描述 示例
選項 - .modal(options) 將您的內容啟用為模態框。接受可選的選項物件。 
$('#identifier').modal({
   keyboard: false
})
切換 - .modal('toggle') 手動切換模態框。 
$('#identifier').modal('toggle')
顯示 - .modal('show') 手動開啟模態框。 
$('#identifier').modal('show')
隱藏 - .modal('hide') 手動隱藏模態框。 
$('#identifier').modal('hide')

示例

以下示例演示了方法的用法 -

線上演示 
<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

只需點選 Esc 鍵，模態框視窗就會退出。

事件

下表列出了與模態框一起使用的事件。這些事件可用於掛鉤到函式中。

事件 描述 示例
show.bs.modal 在呼叫 show 方法後觸發。 
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
shown.bs.modal 當模態框已對使用者可見時觸發（將等待 CSS 過渡完成）。 
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal 當呼叫 hide 例項方法時觸發。 
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal 當模態框已完成對使用者的隱藏時觸發。 
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

示例

以下示例演示了事件的用法 -

線上演示 
<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

如上圖所示，如果您點選“關閉”按鈕，即 隱藏 事件，則會顯示一條警報訊息。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.