jQuery Hide and Show DOM Element

Question

I have the following code:

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

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 && $.browser.version == "6.0") {
    $('div#Modal')
    {
        var overlayHeight = $('body').height();
        $('div#Modal').css({ 'height': overlayHeight });
    }
}

});

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?

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!

Thanks.

Answer 1

change

window.onload = JS_Utils_BuildModal;

to

JS_Utils_BuildModal(); //This will generate the modalwindow.

And then

JS_Utils_ShowModal() //This will show the modalwindo

The beginning of your code runs when your document is ready (onload). So there is no need to call window.onload. Else the JS_Utils_BuildModal is an function which is closed by () so, JS_Utils_BuildModal();

jQuery(document).ready(function ($) {
//this is run onload
JS_Utils_BuildModal();
});

function JS_Utils_BuildModal()
    {
        var objModal = '<div id="Modal"><div class="ModalContent"><p>please wait</p></div></div>';
        $('body').append(objModal);
        $('div#Modal').hide();
    }

    function JS_Utils_ShowModal()
    {
        $('div#Modal').show();
    }

    function JS_Utils_HideModal()
    {
        $('div#Modal').hide();
    }

Answer 2

I ended up with this in the end:

    var objModal = '<div id="Modal"><div class="ModalContent"><div class="ModalLoading"><div></div></div><p>please wait</p></div></div>';

var loadingFrame = 1;

jQuery(document).ready(function ($)
{
    // Forces the modal to show full height in IE6
    if ($.browser.msie && $.browser.version == "6.0")
    {
        $('div#Modal')
        {
            var overlayHeight = $('body').height();
            $('div#Modal').css({ 'height': overlayHeight });
        }
    }
});

jQuery.noConflict();


function JS_Utils_ShowModal()
{
    objCheck = document.getElementById("doMBoxOnSubmit");

    if (objCheck && objCheck.value == "1") {

        jQuery('body').append(objModal);

       // loadingFrame = (loadingFrame + 1) % 12;

        // Loading animation
        //jQuery('div.ModalLoading div').css('top', (loadingFrame * -40) + 'px');

    }
    else
    {
        if (objCheck)
        {
            objCheck.value = "1";
        }
    }
}

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

function JS_Utils_BlockModal()
{
    objCheck = document.getElementById("doMBoxOnSubmit");
    if (objCheck)
    {
        objCheck.value = "0";
    }
}