使用Javascript和CSS的模式弹出窗口

Question

我在项目中使用AJAX模态弹出窗口，但是存在问题。

现在，我决定使用javascript来实现类似行为

我可以使用显示弹出窗口

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

现在我只需要如何使背景禁用（如模式弹出窗口一样）？

Answer 1

您创建了一个跨越整个页面的div，但初始样式为display：none;。 以及其他任何样式。 即透明度为80％，背景色为黑色。

当显示dv时，请更改div的显示属性（如上）。 只要确保dv的z-index高于背景div，背景div的z-index高于页面上的内容即可：)

Answer 2

您是否考虑过为此使用图书馆？ 我发现对程序员最友好且最灵活的是NyroModal （基于jQuery）。 库的优点是它将处理模态对话框中发生的许多细微问题，例如，确保它在所有浏览器中都能有效工作（并克服了诸如定位之类的各种怪癖），启用和禁用动画以及围绕它的灯箱效果。

NyroModal允许您动态生成对话框，而大多数库都适合使用更简单的用例，例如“使所有图像都可单击，以便用户单击它们时将它们显示为灯箱”。