javascript - 添加 "modal div"时更改背景颜色和透明度

Question

我有一个页面，在某些时候显示一个隐藏的 div 并添加一个用于输入一些数据的表单。也许您可以将其称为模态 div。

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

最好的策略是什么？添加图像并以某种方式拉伸(stretch)它并使其透明？是否有可能使该图像捕获所有在我的 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。