如何確保多個模態在 Bootstrap 中正確疊加可見背景？

多個模態疊加

在這種情況下，您希望疊加層顯示在第一個模態上方，而不是其後面。

解決方案

受@YermoLamers 和@Ketwaroo 貢獻的啟發，一個全面的解決方案包括：

背景Z 索引修復

要解決第一個模態後面出現的背景問題，請實作以下JavaScript：

<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 索引自訂

如果您願意要自訂z-index 計算，您可以採用以下方法：

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

滾動條修復

解決關閉第二個模態框阻止在模態框中滾動的情況超過瀏覽器高度，請包含以下JavaScript：

<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中文網其他相關文章！