jQuery弹出框覆盖不关闭

我正在使用一个WordPress站点的预先存在的jQuery弹出式插件。弹出窗口很好，但唯一的问题是造型 - 它没有在设计中包含任何类型的“覆盖”。由于我想让背景变得“灰暗”，我着手为CSS添加一些类和样式来实现这一点，但是我正在碰壁。jQuery弹出框覆盖不关闭

这里是原来的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，所以我不确定要在正确的函数中添加什么才能在关闭链接上单击时获得关闭操作的相同效果。

来源

2011-07-25 RodeoRamsey

我不完全确定'popupOverlay'应该达到什么样的效果，但是它可能位于您的'closebox'链接的顶部，使其无法点击？ – Tomm

你能把我们链接到实际的插件吗？或者至少为我们提供了messagebox和popupoverlay的CSS？ – Purag

@Tomm - 不，其他样式的z-index使它们都以正确的顺序坐在那里。当你点击弹出框上的CLOSE按钮时，它会关闭，但它后面的OVERLAY（其中有不透明的颜色样式应用于它）保持放置状态，无法使用整个站点。 – RodeoRamsey

我明白了。你为什么不试试这个

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

没有必要对所有的jQuery遍历（使用即.parents()法）两种元素具有唯一的ID。您的代码存在的问题是#popupOverlay不是closebox的父代。

来源

2011-07-25 01:06:33 Tomm

BRILLIANT Tomm !!!非常感谢！！！ :)这没有把戏！ – RodeoRamsey

jQuery弹出框覆盖不关闭

回答

相关问题