Question

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 to add to the right function to get the same effect of the close action when clicked on the close link.

Answer 1

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.