使用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允许您动态生成对话框，而大多数库都有更简单的用例，例如“使所有图像都可点击，以便在用户点击它们时显示为lightboxed”。