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

感谢大家的反馈！

Answer 1

在这个jsfiddle中它对我有用：

http://jsfiddle.net/z8FmA/

Answer 2

试试这个：

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

如果$("#getOverlay") 不，则在DOM加载上尝试：

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

并将第一行css更改为：

.overlay {

see working DEMO here

Answer 3

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

用jQuery覆盖层

3 个答案: