jQuery Hide and Show DOM Element
<p>I have the following code:</p>

<pre><code>jQuery(document).ready(function ($) {
var objModal = '&lt;div id="Modal"&gt;&lt;div class="ModalContent"&gt;&lt;p&gt;please wait&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';

function JS_Utils_ShowModal() {
    if (!objModal) {
        $('body').append(objModal);
    }
}

function JS_Utils_HideModal() {
    if (objModal) {
        $('body').remove(objModal);
    }
}

// Forces the modal to show full height in IE6

if ($.browser.msie &amp;&amp; $.browser.version == "6.0") {
    $('div#Modal')
    {
        var overlayHeight = $('body').height();
        $('div#Modal').css({ 'height': overlayHeight });
    }
}
</code></pre>

<p>});</p>

<p>The basic idea is that when the page loads it builds a modal box, and hides it! When a user makes the JS_Utils_ShowModal function run it will then show the modal. However this doesn't seem to work, any ideas why? And is window.onload the best way to build the modal when the page loads up?</p>

<p><strong>EDIT: Changed it so that the modal is a variable that I would like to append and remove from the DOM when user runs one of the functions. I also need to check that the modal doesn't already exist before adding it or removing it!</strong></p>

<p>Thanks.</p>
