jQuery Hide and Show DOM Element

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.

---

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();
    }

---

This is not encapsulated, but you could encapsulate this and just expose the two functions. At least this may give you some ideas...

var JS_Utils_ShowModal, JS_Utils_HideModal, objModal;

JS_Utils_ShowModal = function () {
    var sizeModal;

    if (objModal) {
        return;
    }

    sizeModal = function ()  {
        var overlayHeight;
        if ($.browser.msie && $.browser.version == "6.0") {
            overlayHeight = $('body').height();
            objModal.css({ 'height': overlayHeight });
        }
    }

    objModal = $('<div id="Modal"><div class="ModalContent"><p>please wait</p></div></div>')
        .appendTo('body')
        .show();

    sizeModal();
    $(window).resize(sizeModal);    
};


JS_Utils_HideModal = function () {
    if (objModal) {
        objModal.remove();
    }
};

You could also do something like hide and fade in instead of just a show() on objModal.

objModal.hide().fadeIn();

---

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";
    }
}