Question

我有一个页面，在某些时候显示一个隐藏的div并添加一个表单来输入一些数据。你可以称之为模态div。

我想要做的是将所有其他内容变灰，只允许与上述div进行交互。我希望背景是灰色和透明的。

最佳策略是什么？添加图像并以某种方式拉伸它并使其透明？是否有可能使该图像捕获最终在我的form-div之外的所有事件？怎么做？

还有其他更好的方法吗？

我正在使用jquery，所以最好的办法就是如果我可以为此设置任何jquery api。

Answer 1

这实际上并不复杂。它可以在一两行中完成：

/* initialize it */
$(document.body).append("<div id='shadow' style='position:fixed;left:0px;top:0px;width:100%; height:100%; background:black;'></div>").find("#shadow").hide();

/* show it */
$("#shadow").fadeTo(200,0.5);

/* hide it */
$("#shadow").fadeTo(200,0);

然后确保将表单设置为高于阴影的z-index。

Answer 2

您可以使用Modal jQuery Dialog执行此操作。除了对话框外，它会使背景变灰并禁用页面上的编辑。

Answer 3

使div重叠整个页面。这个div是50％透明和灰色。那么你的模态div就是最重要的。

更多信息：Snippets: Howto Grey-Out The Screen

添加“模态div”时更改背景颜色和透明度

3 个答案: