Question

此功能可为整个浏览器屏幕添加具有以下属性的叠加层，

$('a.cell').click(function()    {
    $('<div id = "overlay" />').appendTo('body').fadeIn("slow");
});

#overlay
{
background-color: black;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 100;
opacity: 0.5;
}

这个函数应该删除它。

$('#overlay').click(function()  {
    $(this).fadeOut("slow").remove();
});

但它似乎绝对没有任何东西，现在我的页面被黑色过度粘在上面了。删除有什么问题？

Answer 1

问题在于，当您添加click处理程序时，没有任何叠加层，因此您将处理程序添加到一组空元素中。

要解决此问题，请使用live方法将处理程序绑定到匹配#overlay的所有元素，无论何时创建它们。

此外，fadeOut不是阻塞调用，因此它在元素完成淡出之前返回。因此，您在元素开始淡出后立即调用remove。

要解决此问题，请在动画完成后使用fadeOut的回调参数调用remove。

例如：

$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); });
});

Answer 2

你走了。这应解决问题，并在删除之前让叠加淡出。

$('#overlay').live("click", function()  {
        $(this).fadeOut("slow", function() { $(this).remove() });
});

Answer 3

删除应该在fadeout的回调中，如下所示：

$('#overlay').live('click', function()  {
    $(this).fadeOut("slow", function() {
       $(this).remove();
    });
});

Answer 4

尝试：

$('#overlay').live('click', function()  {
        $(this).fadeOut("slow").remove();
});

Answer 5

我的建议是使用jquery.tools overlay plugin。您的叠加层将有一个触发器（通常是按钮或链接），但您可以使用javascript命令加载或清除它，例如：

JS：

var config = { closeOnClick:true, mask:{opacity:0.7, color:'#333', loadSpeed:1} }
$("#myTrigger").overlay(config); // add overlay functionality
$("#myTrigger").data("overlay").load(); // make overlay appear
$("#myTrigger").data("overlay").close(); // make overlay disappear

HTML：

<div id="myOverlay" style="display:none;">Be sure to set width and height css.</div>
<button id="myTrigger" rel="#myOverlay">show overlay</button>

我可以添加叠加层，但我无法删除它（jQuery）

5 个答案: