使用jQuery覆盖层

我正在尝试创建一个覆盖层，当单击某个元素时，它将完全用半透明层覆盖我的屏幕。我正在努力将其添加到文档中：

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

谢谢大家的反馈

试试这个：

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

并将css的第一行更改为：

.overlay { 

---

在这个JSFIDLE中，它对我很有效：

---

您应该像

一样将覆盖直接添加到html，向css定义添加

显示：无

，然后在点击处理程序上执行

$（“#覆盖”）.show（）

。否则，每次单击元素时都会向主体添加一个新的div。

（图像被颜色替换，因为我无法访问您的图像）。你确定你的点击处理程序被绑定了吗？你在禁用扩展和插件的多个浏览器中检查了吗？触发覆盖的按钮是动态注入DOM还是在页面加载中出现？没关系，我可以稍后删除它，不是吗？我想我将能够使用remove（），我想这是对资源的不必要的使用，尽管非常小

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

.overlay {