如何在彈出的其他模態彈出窗口中顯示模態彈出

我彈出了模態彈出窗口。當我點擊Modal Pop Up中的按鈕時，出現另一個Modal Pop Up。但是第二種模式彈出後隱藏在彈出的第一個模態之後。如何讓它顯示在彈出的第一個模式之上。如何在彈出的其他模態彈出窗口中顯示模態彈出

任何想法和建議表示讚賞！

2012-10-08 SaiBand

發佈一些代碼請輸入一個字，我們不知道你在做什麼。其次，從可用性角度來看，彈出另一個模式彈出窗口的模式通常是一個糟糕的主意。 – InSane

嘗試將的z-index你想上方大於另一個彈出包裝的 ..

#popup1 { 
    z-index: 9997; 
} 

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

這是在假設#popup1和#popup2具有相同的父。

來源

2012-10-08 17:15:51

設置彈出窗口的z-index應該位於頂部，比DOM上的任何其他元素都高。把它看作應該在頂層的層。

來源

2012-10-08 17:16:39 srijan

你可以動態地通過使用兩個類和jQuery的使用解決這個問題：

.PopUp { 
    z-index:999; 
    } 

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

所有彈出窗口，默認情況下，將有類「彈出」。

然後創建以下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值高於其他任何彈出窗口。

缺點是如果出現這種情況，當您打開兩個以上的彈出窗口時，背景彈出窗口會有衝突的風險，需要更精細的腳本來減少/增加z-index。但這取決於您項目的性質和範圍。

來源

2012-10-08 17:48:24 Nw167

如何在彈出的其他模態彈出窗口中顯示模態彈出

回答

相關問題