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);

DEMO

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

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

---

仅供引用，您还可以将上述样式放在 CSS 中的一个类中，然后在需要时使用 jQuery 的 addClass 到 body 以及 removeClass当你想删除它时。