使用Javascript和Css的模態彈出式菜單

Question

我在我的項目中使用AJAX模式彈出窗口，但存在問題。

現在我決定使用JavaScript

到acheive類似的行爲，我能夠使用

document.getElementById('dv').style.display = "block"; 

現在我只需要顯示彈出，我怎樣才能使背景禁用像模式彈出？

Answer 1

您創建一個跨越整個頁面的div，但初始樣式是display：none;以及任何其他風格。即透明度爲80％，背景顏色爲黑色。

當您顯示dv更改div（上圖）的顯示屬性時。只要確保dv具有比背景div更高的z-index並且背景div具有比頁面上的內容更高的z-index :)

Answer 2

您是否考慮過使用庫？我發現的程序員友好性和靈活性最高的是NyroModal（基於jQuery）。圖書館的優點是它可以處理模態對話所發生的許多微妙的事情，例如，確保它可以在所有瀏覽器中有效地工作（並克服諸如定位之類的各種怪癖），動畫開啓和關閉，燈箱效果。

NyroModal允許您動態生成對話框，而大多數庫都支持更簡單的用例，例如「使所有圖像可點擊，以便在用戶點擊時顯示爲lightbox」。