Question

我有以下代码：

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

}）;

基本的想法是，当页面加载时，它会构建一个模态框，并隐藏它！当用户运行JS_Utils_ShowModal函数时，它将显示模态。然而，这似乎不起作用，任何想法为什么？ window.onload是在页面加载时构建模态的最佳方法吗？

编辑：更改它以便模态是一个变量，我想在用户运行其中一个函数时追加并从DOM中删除。我还需要在添加或删除模式之前检查模态是否已经存在！

感谢。

Answer 1

变化

window.onload = JS_Utils_BuildModal;

到

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

然后

JS_Utils_ShowModal() //This will show the modalwindo

代码的开头在文档准备就绪（onload）时运行。所以不需要调用window.onload。否则JS_Utils_BuildModal是一个由（）关闭的函数，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

这不是封装的，但你可以封装它并公开这两个函数。至少这可能会给你一些想法...


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

您也可以在objModal上执行隐藏和淡入操作，而不仅仅是show（）。

objModal.hide().fadeIn();

Answer 3

我最终得到了这个：

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

jQuery隐藏和显示DOM元素

3 个答案: