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彈出框覆蓋不關閉

回答

相關問題