Оверлей всплывающего окна jQuery не закрывается

Question

Я использую уже существующий плагин jQuery для сайта WordPress. Всплывающее окно прекрасно работает, но единственной проблемой является стилизация - в дизайне не было никаких «оверлеев». Поскольку я хочу, чтобы фон стал серым, я решил добавить некоторые классы и стили в css, чтобы это произошло, но врезаюсь в стену.

Вот оригинальный HTML:

<div id="messagebox" class="visiblebox">
    <a href="" id="closebox" title="Close this box"></a>
    <div id="message">message content</div>
</div>

И я добавил div для создания этого HTML:

<div id="popupOverlay" class="visiblebox"></div>
<div id="messagebox" class="visiblebox">
    <a href="" id="closebox" title="Close this box"></a>
    <div id="message">message content</div>
</div>

Вот JS - я добавил 2-ю строку в функцию removeMessageBox, приведенную ниже, после редактирования моего HTML, как указано выше:

function removeMessageBox() {
    jQuery(this).parent('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
    jQuery(this).parent('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox');
    return false;
}


function boardReady() {
    jQuery('#closebox').click(removeMessageBox);
    jQuery('#messagebox').css('visibility', 'visible');
}

jQuery(window).load(boardReady);

А вот соответствующий CSS:

div#popupOverlay.visiblebox {display: block;}
div#popupOverlay.hiddenbox {display: none;}
div#messagebox.visiblebox {display: block;}
div#messagebox.hiddenbox {display: none;}

Конечно, это не работает. Я почти не знаю JS, поэтому не уверен, что именно добавить к нужной функции, чтобы получить тот же эффект действия закрытия при нажатии на ссылку закрытия.

Answer 1

Понятно.Почему бы вам не попробовать это

function removeMessageBox() {
    jQuery('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
    jQuery('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox');
    return false;
}

Нет необходимости во всем обходе jQuery (т.е. с использованием метода .parents()), поскольку оба элемента имеют уникальные идентификаторы.Проблема с вашим кодом в том, что #popupOverlay не является родителем closebox.