jquery - 灯箱背景效果

Question

我刚开始学习 jQuery，我不确定如何启用类似于灯箱的背景效果。

我希望我的<div>（注册向导）以 100% 的不透明度显示，并且我希望它后面的所有其他内容都在 50% 左右的不透明度和不可点击的位置。

如何使用 jQuery 实现这一点？

Answer 1

这是如何：

$('<div id="overlay" />').css({
   position:'fixed'
 , width: '100%'
 , height : '100%'
 , opacity : 0.6
 , background: '#000'
 , zIndex:9999
 , top: 0
 , left: 0
}).appendTo(document.body);

演示

您可以将上面的代码放在一个函数中，并在需要该覆盖时调用它。要在不需要时将其删除，您可以：

$('#overlay').remove();

---

仅供参考，您还可以将上述样式放在 CSS 中的类中，然后在addClass需要body时和removeClass想要删除它时使用 jQuery。