2

此功能将具有以下属性的覆盖添加到整个浏览器屏幕，

$('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();
});

但它似乎完全没有做任何事情，现在我的页面被黑色覆盖。删除有什么问题？

4

5 回答 5

9

问题是当您添加click处理程序时，没有任何覆盖，因此您将处理程序添加到一组空元素。

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

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

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

例如：

$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); });
});
于 2009-10-27T21:30:40.290 回答
3

干得好。这应该可以解决问题并让覆盖在删除之前淡出。

$('#overlay').live("click", function()  {
        $(this).fadeOut("slow", function() { $(this).remove() });
});
于 2009-10-27T21:32:32.300 回答
2

Remove 应该在淡出的回调中，如下所示：

$('#overlay').live('click', function()  {
    $(this).fadeOut("slow", function() {
       $(this).remove();
    });
});
于 2009-10-27T21:31:17.763 回答
1

尝试：

$('#overlay').live('click', function()  {
        $(this).fadeOut("slow").remove();
});
于 2009-10-27T21:27:40.483 回答
0

我的建议是使用jquery.tools 覆盖插件。您的叠加层将有一个触发器（通常是一个按钮或链接），但您可以使用 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>
于 2012-04-25T16:38:10.813 回答