使用jQuery叠加层（Overlay layer）

Question

我正在尝试创建一个覆盖整个屏幕的半透明叠加层，当元素被点击时会显示。我无法将它附加到文档中：

#overlay { 
   background-image: url(../overlay.png);
   opacity: 0.5;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
}

$("#getOverlay").click(function() {
    var overlay = $('<div id="overlay">');
    $('body').append(overlay);
});

如果我只是将该层放在我的文档中，它可以正常工作。但点击后将其呈现出来是个问题。

---

更新：

我刚刚意识到我是在 IE 标签下测试它的（FF 插件），这模拟了一个较旧版本的 IE。 FF 和 IE9 的表现是预期的。老版 IE 显然无法识别透明度，因此我修改了 CSS：

#overlay { 
   background-image: url(../overlay.png);
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 12000;
}

感谢大家的反馈！

- santa

---

适用于我（链接为http://jsfiddle.net/hJqGP/，图像已被颜色替换，因为我无法访问您的图像）。你确定你的点击处理程序已经绑定了吗？ - justkt

你在多个浏览器中检查过它，禁用了扩展和插件吗？ - user142019

触发覆盖层的按钮是动态注入到DOM中还是在页面加载时就存在？ - Mark

Answer 1

在这个jsfiddle中，它对我有效：

http://jsfiddle.net/z8FmA/

- Craig

Answer 2

试试这个：

$("#getOverlay").click(function() {
    var overlay = $('<div>');
    overlay.addClass('overlay');
    $('body').append(overlay);
});

如果在 DOM 加载时 $("#getOverlay") 不存在，请尝试：

$("#getOverlay").live('click',function(){...

并将CSS的第一行更改为：

.overlay { 

在此处查看工作演示

- Naftali

Answer 3

你应该直接将覆盖层添加到HTML中，例如<div id="overlay"></div>，在CSS定义中添加display: none，然后在点击处理程序中执行$('#overlay').show()。否则，每次单击元素时都会向body添加一个新的div。

- CarlosZ

---

没关系，我之后可以把它删除，对吧？我想我可以使用remove()。 - santa

我想，尽管很小，但这是一种不必要的资源使用。 - CarlosZ