Я могу добавить оверлей, но не могу удалить его (jQuery)

Question

Эта функция добавляет оверлей со следующими свойствами на весь экран браузера,

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

И эта функция должна удалить его.

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

Но, похоже, это абсолютно ничего не делает, и теперь моя страница застряла с чрезмерно черным. Что не так с удалением?

Answer 1

Проблема в том, что когда вы добавляете обработчик click, наложения не возникает, поэтому вы добавляете обработчик в пустой набор элементов.

Чтобы исправить это, используйте метод live , чтобы привязать ваш обработчик ко всем элементам, которые соответствуют #overlay, при каждом их создании.

Кроме того, fadeOut не является блокирующим вызовом, поэтому он возвращается до того, как элемент заканчивает исчезать. Поэтому вы звоните remove сразу после того, как элемент начинает исчезать.

Чтобы это исправить, используйте параметр обратного вызова fadeOut для вызова remove после завершения анимации.

Например:

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

Answer 2

Вот, пожалуйста. Это должно решить проблему и позволить наложению исчезнуть перед его удалением.

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

Answer 3

Удалить должно быть в обратном вызове для fadeout, вот так:

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

Answer 4

Попробуйте:

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

Answer 5

Я рекомендую использовать плагин наложения jquery.tools . У вашего оверлея будет триггер (обычно кнопка или ссылка), но вы можете загрузить или очистить его с помощью команды javascript, например ::

ЯШ:

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>