Posso aggiungere un overlay, ma non riesco a rimuoverlo (jQuery)

Question

Questa funzione aggiunge un overlay con le seguenti proprietà all'intera schermata del browser,

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

E questa funzione dovrebbe rimuoverlo.

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

Ma sembra non fare assolutamente nulla e ora la mia pagina è bloccata con un nero eccessivamente sopra di essa. Cosa c'è che non va nella rimozione?

Answer 1

Il problema è che quando si aggiunge il gestore clic , non c'è alcun overlay, quindi si aggiunge il gestore a un set di elementi vuoto.

Per risolvere questo problema, utilizzare il metodo live per associare il gestore a tutti gli elementi che corrispondono a #overlay , ogni volta che vengono creati.

Inoltre, fadeOut non è una chiamata bloccante, quindi ritorna prima che l'elemento finisca di scomparire. Pertanto, stai chiamando remove subito dopo che l'elemento inizia a scomparire.

Per risolvere questo problema, usa il parametro callback di fadeOut per chiamare remove al termine dell'animazione.

Ad esempio:

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

Answer 2

Ecco qua. Questo dovrebbe risolvere il problema e lasciare che l'overlay svanisca prima di rimuoverlo.

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

Answer 3

Rimuovi dovrebbe essere nel callback per dissolvenza, in questo modo:

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

Answer 4

Prova:

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

Answer 5

La mia raccomandazione è di utilizzare il jquery.tools plugin overlay . Il tuo overlay avrà un trigger (di solito un pulsante o un link), ma puoi caricarlo o cancellarlo con un comando javascript, ad es .:

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>