ブートストラップで重複するモーダルを修正する方法: setTimeout と Z-Index 管理を使用したシンプルなソリューション。-jsチュートリアル-php.cn

ブートストラップで重複するモーダルを修正する方法: setTimeout と Z-Index 管理を使用したシンプルなソリューション。

Barbara Streisand

リリース： 2024-10-26 02:14:02

オリジナル

486 人が閲覧しました

How to Fix Overlapping Modals in Bootstrap: A Simple Solution with setTimeout and Z-Index Management.

複数のモーダルが簡単にオーバーレイされる

複数のモーダルが互いにオーバーレイすることに遭遇すると、特に新しいモーダルを代わりに一番上に表示する必要がある場合にイライラすることがあります。既存のものの後ろ側。この問題を解決するために、@YermoLamers と @Ketwaroo という 2 人の素晴らしい貢献者からインスピレーションを受けたソリューションを詳しく掘り下げていきます。

Backdrop Z-Index Fix

このソリューションは依存していますshow.bs.modal イベントがトリガーされたときに .modal-backdrop 要素がまだ作成されていないため、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>

ログイン後にコピー

このアプローチにはいくつかの利点があります。

動的に作成されたものを含む、ページ上のすべての .modal 要素に適用されます。
背景は前のモーダルをすぐにオーバーレイします。

Z インデックスの計算

Z インデックスをハードコーディングしたくない場合は、ページ上の最高の Z-インデックスを動的に計算できます:

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

ログイン後にコピー

Scrollbar Fix

モーダルがブラウザの高さを超える場合、内部モーダルを閉じるときにスクロールの問題が発生する可能性があります。これに対処するには、以下を追加します。

<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 でテストされています。

JSFiddle の例

[JSFiddle の例](https://jsfiddle.net/)

以上がブートストラップで重複するモーダルを修正する方法: setTimeout と Z-Index 管理を使用したシンプルなソリューション。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。