jQueryのポップアップボックスオーバーレイが閉じない

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> 

そして私は、このHTMLを作成することが、上記のdivを追加しました：ここ

<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である - 私はremoveMessageBox関数に2行目を追加しました上記の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; 
} 

をしようとしないのはなぜ両方の要素が固有のIDを持っているように（すなわち.parents()メソッドを使用して）すべてのjQueryを横断するため必要はありません。あなたのコードの問題は#popupOverlayがcloseboxの親ではないということです。