jQuery调暗背景

Question

我想弄清楚弹出窗口出现时如何调暗背景......？

访问者将阅读常见问题解答页面，然后会出现一个弹出窗口，询问访问者是否想要在电子邮件列表中注册。

你可以看到它here

然后，我希望背景暗淡，所以观众的注意力集中在盒子上。

然后，当他们输入他们的电子邮件地址或点击“关闭”时，它会UN-dims（恢复正常）并弹出窗口消失。

所以我的主要问题是如何使背景变暗？

Answer 1

DIV以不透明度覆盖整个屏幕，背景变暗。为了您的目的，您可以自己编写或者查看类似这样的库，它将为您提供开箱即用的功能：http://flaviusmatis.github.io/easyModal.js/

Answer 2

将所有非弹出内容包装在包装器div中（例如，id =＆＃34; wrapperDiv＆＃34;），然后在弹出窗口淡入或打开的回调中淡出所需的不透明度，例如：

$("#popup").fadeIn(500, function () {
    $("#wrapperDiv").fadeTo("slow", 0.5); //or whatever desired opacity
});

Answer 3

将此添加到您的html

<div class="div_popup_overlay"></div>

和Css

.div_popup_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333;
opacity: .7;
z-index: 3000;
}

当你打开弹出窗口时，显示div_popup_overlay div，当关闭弹出窗口时隐藏它。