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

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

$('a.cell').click(function() { $('
').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的callback参数调用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插件 。 您的叠加层将有一个触发器（通常是按钮或链接），但您可以使用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：

 
Be sure to set width and height css.
 show overlay