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
.
精彩评论