3

モーダルポップアップがあります。モーダルポップアップのボタンをクリックすると、別のモーダルポップアップが表示されます。ただし、2番目のモーダルポップアップの一部は、最初のモーダルポップアップの背後に隠れています。最初のモーダルポップアップの上に表示する方法。

どんなアイデアや提案も大歓迎です！

4

3 に答える 3

8

必要なポップアップラッパーのz-indexを他のラッパーよりも大きく設定してみてください。

#popup1 {
   z-index: 9997;
}

#popup2 {
   z-index: 9998; // This will come above popup1
}

これは、同じ親#popup1を持つことを条件としています。#popup2

于 2012-10-08T17:15:51.417 に答える
2

2つのクラスとjQueryを使用して、これを動的に解決できます。

.PopUp {
    z-index:999;
    }

.PopUp-focus {
    z-index:1000;
    }

デフォルトでは、すべてのポップアップのクラスは「PopUp」になります。

次に、次のjQuery関数を作成して、ポップアップを開くイベントを処理します。（コードを提供していないため、これはコンテキストから外れている可能性がありますが、例として...）

function OpenPopup(popupID) {

    $(".PopUp-focus").removeClass('PopUp-focus').addClass('PopUp');

    $("#"+popupID+"").removeClass('PopUp').addClass('PopUp-focus');

    $("#"+popupID+"").fadeIn(500); // Your code to make the popup appear. (Random example).

}

- 

<div onClick="OpenPopup('ID of popup');">Open Popup</div>

これにより、最近開いたポップアップに他のポップアップよりも高いz-indexを与えることで、2つのポップアップが同時に開いているという問題を非常に簡単に解決できます。

欠点は、2つ以上のポップアップを開いている状況が発生した場合、バックグラウンドポップアップが衝突するリスクがあり、z-indexをデクリメント/インクリメントするためのより複雑なスクリプトが必要になることです。しかし、それはあなたのプロジェクトの性質と範囲に依存します。

于 2012-10-08T17:48:24.063 に答える
2

ポップアップのz-indexを設定します。これは、DOMの他のどの要素よりも高く、一番上にある必要があります。一番上にあるはずのレイヤーと考えてください。

于 2012-10-08T17:16:39.823 に答える