Posso adicionar uma sobreposição, mas não posso removê-lo (jQuery)

Question

Essa função adiciona uma sobreposição com as seguintes propriedades para a tela inteira do navegador,

$('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 esta função é suposto para removê-lo.

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

Mas parece não fazer absolutamente nada e agora minha página é preso com um preto excessivamente sobre ele. O que há de errado com a remoção?

Answer 1

O problema é que quando você está adicionando o manipulador click, não há qualquer sobreposição, então você está adicionando o manipulador para um conjunto vazio de elementos.

Para corrigir isso, use o método vivo para ligar seu manipulador a todos os elementos que correspondem #overlay, sempre que eles são criados.

Além disso, fadeOut não é uma chamada de bloqueio, por isso retorna antes do elemento acabamentos desaparecendo. Portanto, você está chamando remove logo após o elemento inicia desaparecendo.

Para corrigir isso, parâmetro callback uso de fadeOut para remove chamada após a conclusão da animação.

Por exemplo:

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

Answer 2

Aqui está. Isso deve resolver o problema e deixar a sobreposição desaparecer antes de removê-lo.

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

Answer 3

Remove deve estar na chamada de retorno para fadeout, assim:

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

Answer 4

Tente:

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

Answer 5

A minha recomendação é usar o jquery.tools sobreposição plug-in . Seu sobreposição terá um gatilho (geralmente um botão ou link), mas você pode carregar ou limpá-la com um comando javascript, por exemplo:.

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>