Je peux ajouter une superposition, mais je ne peux pas l'enlever (jQuery)

Question

Cette fonction ajoute une superposition avec les propriétés suivantes à la totalité de l'écran du navigateur,

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

Et cette fonction est supposée l'enlever.

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

Mais cela ne semble absolument rien faire et maintenant ma page est recouverte d’un noir excessif. Quel est le problème avec la suppression?

Answer 1

Le problème est que lorsque vous ajoutez le gestionnaire cliquez sur , il n'y a pas de superposition, vous ajoutez donc le gestionnaire à un ensemble d'éléments vides.

Pour résoudre ce problème, utilisez la méthode live pour lier votre gestionnaire à tous les éléments. qui correspondent à #overlay , chaque fois qu'ils sont créés.

De plus, fadeOut n'est pas un appel bloquant. Il est donc renvoyé avant la fin de la suppression progressive de l'élément. Par conséquent, vous appelez remove juste après que l'élément commence à disparaître .

Pour résoudre ce problème, utilisez le paramètre de rappel de fadeOut pour appeler remove une fois l'animation terminée.

Par exemple:

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

Answer 2

Ici vous allez. Cela devrait résoudre le problème et laisser la superposition s’effacer avant de la supprimer.

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

Answer 3

Supprimer doit figurer dans le rappel de fermeture en fondu, comme suit:

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

Answer 4

Essayez:

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

Answer 5

Je vous recommande d'utiliser le plug-in de superposition jquery.tools . Votre incrustation aura un déclencheur (généralement un bouton ou un lien), mais vous pouvez le charger ou l’effacer à l’aide d’une commande javascript, par exemple:

.

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>