如何確保Bootstrap中多個模態以正確的順序疊加？

如何使多個模態框以正確的順序疊加

在某些場景下，有必要在同一頁上顯示多個模態框。然而，確保每個模態出現在前一個模態之上可能具有挑戰性。本文探討了一種以正確順序覆蓋模態的解決方案，特別是當涉及兩個以上模態時。

設定

在給定的程式碼片段中，多個模態 ( “#myModal”和“#myModal2”）被編程為透過按鈕事件啟動。問題在於「#myModal2」模式如何出現在「#myModal」模式後面，而不是覆寫它。

解

解圍繞著製作一個JavaScript 函數，可有效管理模態及其背景的 z 索引。以下詳細說明的此函數透過實現以下步驟來實現所需的行為：

1. 背景Z 索引修復：

   • A setTimeout 函數用於解決.modal-backdrop 元素建立過程中的延遲問題。
   • 當每個模態變得可見時，其 z 索引逐漸遞增，確保它覆蓋前一個模態。
   • .modal-backdrop z-index 設定為比模態框的 z-index 小 1，使其能夠用作模態框的背景而不遮擋它。

2. 滾動條修復：

   • 當超級瀏覽器高度的模態框關閉時，在其下方的可見模態框內滾動將被停用。為了解決這個問題，當模式被隱藏時會執行一個函數，透過在頁面的 body 元素上維護 modal-open 類別來重新啟用滾動。

程式碼片段

<code class="javascript">$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});

$(document).on('hidden.bs.modal', '.modal', () => $('.modal:visible').length && $(document.body).addClass('modal-open'));</code>

結論

結論確保多個模態以正確的順序疊加，背景始終出現在活動模態後面。該技術經過測試，適用於 Bootstrap 版本 3.1.0 至 3.3.5。

以上是如何確保Bootstrap中多個模態以正確的順序疊加？的詳細內容。更多資訊請關注PHP中文網其他相關文章！