Question

我正在为WordPress网站使用预先存在的jQuery弹出插件。弹出窗口效果很好但唯一的问题是样式 - 它在设计中没有包含任何类型的“叠加”。由于我希望背景“灰显”，我开始向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 - 我在上面编辑我的HTML之后将第二行添加到下面的removeMessageBox函数中：

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()方法），因为两个元素都具有唯一ID。您的代码存在的问题是#popupOverlay不是closebox的父级。

jQuery弹出框覆盖不关闭

1 个答案: