ブートストラップで複数のモーダルを使用して正しいモーダルスタッキングを確保するにはどうすればよいですか?

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

複数のモーダルを含むインターフェイスでは、開かれたモーダルが正しくスタックされ、それぞれの新しいモーダルが表示されることが重要です以前のものの上にあります。ただし、開発者が直面する一般的な問題は、後続のモーダルが既存のモーダルの背後に表示され、望ましくないオーバーレイが作成される可能性があることです。

この問題に対処するには、モーダル背景の z-index プロパティの変更と、

Backdrop z-index Fix

モーダル背景の正しいスタック順序を保証するために、カスタマイズされたソリューションが実装されています。具体的には、show.bs.modal イベント トリガー中にモーダル背景が存在しないため、setTimeout 関数が使用されます。

<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 インデックス値が優先される場合は、ページ上の最大の Z インデックスを計算するための代替方法を使用できます。

<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 で効果的に機能することが確認されています。

以上がブートストラップで複数のモーダルを使用して正しいモーダルスタッキングを確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。