How to clear content div and reappear with javascript

Question

I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.

Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/

I have not included the modal due to the amount of extra code, however, here is a link to the actual page

to make the modal appear just click on the 'joey' link.

Thanks!

EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:

<script>
$(function () {
    $('#fadein').on('click', function () {
    $.fn.custombox( this {
    effect: 'fadein'
    });
    return false;
    });
});
</script>

This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??

Answer 1

You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:

function clearBox(wholePageContainer)
{
 document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
 document.getElementById(wholePageContainer).style.display = "block";
}

Demo

Answer 2

Is this what you were looking for:

http://codepen.io/anon/pen/giFEL

Edited: Explanation to the above link: In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage ie 50%, This will keep the div occupy space event if it is empty.

Next i am storing the html content to a hidden div element and restoring it back to the div when required.