开发者

jQuery pop up box overlay not closing

I am using a pre-existing jQuery popup plugin for a WordPress site. The popup works great but the only problem is the styling - it didn't include any sort of "overlay" in the design. Since I want the background to "grey out", I set out to adding some classes and styles to the css to make this happen, but am running into a wall.

Here was the original HTML:

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

And I added a div above that to create this 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>

Here is the JS - I added the 2nd line to the removeMessageBox function below after editing my HTML per above:

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);

And here is some corresponding CSS:

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

Of course, it's not working. I barely know any JS so I'm not sure exactly what开发者_StackOverflow to add to the right function to get the same effect of the close action when clicked on the close link.


I see. Why don't you try this

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

There is no need for all the jQuery traversing (i.e. using the .parents() method) as both elements have unique IDs. The problem with your code is that #popupOverlay is not a parent of closebox.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜