Ich kann einen Overlay hinzufügen, aber ich kann es nicht entfernen (jQuery)

Question

Diese Funktion fügt einen Overlay mit den folgenden Eigenschaften auf den gesamten Browser-Bildschirm,

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

Und diese Funktion soll es entfernen.

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

Aber es scheint, absolut nichts zu tun und jetzt meine Seite ist mit einem schwarzen übermäßig über ihn stecken. Was ist los mit der Entfernung?

Answer 1

Das Problem ist, dass, wenn Sie die click Handler sind hinzufügen, es keine Überlagerung, so dass Sie den Handler in einen leeren Satz von Elementen sind hinzuzufügen.

Um dies zu beheben, verwenden Sie die leben Handler für alle Elemente zu binden dass Spiel #overlay, sobald sie erstellt werden.

Auch ist fadeOut kein blockierenden Aufruf, so gibt es, bevor das Element Ausblendung beendet. Daher sind Sie remove direkt nach dem Element Aufruf startet ausblenden.

Um dies zu beheben, verwenden Sie fadeOut Rückruf Parameter remove nachdem die Animation beendet zu nennen.

Zum Beispiel:

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

Answer 2

Hier gehen Sie. Dies sollte das Problem beheben und das Overlay lassen blendet, bevor es zu entfernen.

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

Answer 3

Remove in dem Callback sein sollte Fadeout, etwa so:

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

Answer 4

Versuchen:

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

Answer 5

Meine Empfehlung ist, die jquery.tools Overlay Plugin zu verwenden. Ihre Overlay wird einen Trigger (in der Regel eine Schaltfläche oder einen Link), aber man kann es mit einem Javascript-Befehl laden oder löschen, z.

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>