ブートストラップで複数のモーダルが表示される背景に正しくオーバーレイされるようにするにはどうすればよいですか?

複数のモーダルのオーバーレイ

このシナリオでは、オーバーレイを最初のモーダルの後ろではなく上に表示したいとします。

ソリューション

@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 インデックスの計算をカスタマイズするには、以下を使用できます。

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

Scrollbar Fix

2 番目のモーダルを閉じるとモーダルでスクロールできない場合を解決するにはブラウザの高さを超える場合は、次の 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 で徹底的にテストされています。このソリューションを実装すると、背景が最初のモーダルの上に表示され、スクロールバーが必要に応じて機能し続ける状態で、複数のモーダルが正しくオーバーレイされることを保証できます。

以上がブートストラップで複数のモーダルが表示される背景に正しくオーバーレイされるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。