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

複数のモーダルを正しい順序でオーバーレイする方法

特定のシナリオでは、同じページに複数のモーダルを表示する必要があります。ただし、各モーダルが前のモーダルの上に確実に表示されるようにするのは困難な場合があります。この記事では、特に 3 つ以上のモーダルが関係する場合に、モーダルを正しい順序でオーバーレイするための解決策について説明します。

Setup

指定されたコード スニペットでは、複数のモーダル ( "#myModal" および "#myModal2") は、ボタン イベントを通じて起動するようにプログラムされています。問題は、「#myModal2」モーダルが「#myModal」モーダルに重なるのではなく、その背後にどのように表示されるかにあります。

解決策

解決策は、モーダルとその背景の z-index を効率的に管理する JavaScript 関数。以下で詳しく説明するこの関数は、次の手順を実装することで目的の動作を実現します:

1. Backdrop Z-Index Fix:

   • A setTimeout 関数は、.modal-backdrop 要素の作成の遅延に対処するために使用されます。
   • 各モーダルが表示されると、その Z インデックスが徐々に増加し、前のモーダルを確実にオーバーレイします。
   • .modal-backdrop z-index は、モーダルの z-index より 1 つ小さい値に設定され、モーダルを覆い隠すことなく背景として機能できるようにします。

2. スクロールバーの修正:

   • ブラウザの高さを超えるモーダルが閉じられると、その下に表示されているモーダル内のスクロールが無効になります。これに対処するために、モーダルが非表示になっているときに関数が実行され、ページの body 要素でモーダルオープン クラスを維持することでスクロールが再び有効になります。

コード スニペット

<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 で効果的に機能します。

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