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

Question

This function adds an overlay with the following properties to the entire browser screen,

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

And this function is supposed to remove it.

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

But it seems to do absolutely nothing and now my page is stuck with a black overly over it. What's wrong with the removal?

Answer 1

The problem is that when you're adding the click handler, there isn't any overlay, so you're adding the handler to an empty set of elements.

To fix this, use the live method to bind your handler to all elements that match #overlay , whenever they are created.

Also, fadeOut is not a blocking call, so it returns before the element finishes fading out. Therefore, you're calling remove right after the element starts fading out.

To fix this, use fadeOut 's callback parameter to call remove after the animation finishes.

For example:

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

Answer 2

Here you go. This should fix the problem and let the overlay fade out before removing it.

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

Answer 3

Remove should be in the callback to fadeout, like so:

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

Answer 4

Try:

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

Answer 5

My recommendation is to use the jquery.tools overlay plugin . Your overlay will have a trigger (usually a button or link), but you can load or clear it with a javascript command, eg:

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>