如何確保 Bootstrap 中多個模態的模態堆疊正確？

多個模態疊加

在具有多個模態的介面中，確保開啟的模態正確堆疊以及每個新模態的出現至關重要高於先前的。然而，開發人員面臨的一個常見問題是後續模態可能會顯示在現有模態後面，從而產生不良的疊加。

為了解決此問題，解決方案涉及修改模態背景的 z-index 屬性和其元素已呈現。

背景 z-index 修復

為了確保模態背景的正確堆疊順序，實施了量身定制的解決方案。具體來說，使用了 setTimeout 函數，因為在 show.bs.modal 事件觸發期間不存在模態背景。

<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'));
});</code>

這種方法有幾個關鍵優勢：

• 它對頁面上的每個模態框（包括動態建立的模態框）都有效運作。
• 背景立即覆蓋其下方的模態框，從而實現無縫堆疊。

z-index計算

如果首選自訂z-index 值，可以採用另一種方​​法來計算頁面上的最高z-index：

<code class="javascript">const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));</code>

滾動條修復

為了解決模態框超出瀏覽器高度時滾動的潛在問題，可以實現一個附加腳本：

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

版本相容性

所提出的解決方案已徹底測試並確認可以在Bootstrap 版本3.1.0 - 3.3.5 中有效運作。

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