jQuery的隐藏和显示DOM元素

问题描述：

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页面加载时建立模式的最佳方式？

编辑：改变它，以便模式是一个变量，当用户运行其中一个功能时，我想追加和删除该变量。我还需要在添加或删除模块之前检查模块是否已经存在！

感谢。

你可以看看jQuery UI的对话 - http://jqueryui.com/demos/dialog/ – 2010-09-15 11:13:45

答

变化

window.onload = JS_Utils_BuildModal;

到

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

然后

JS_Utils_ShowModal() //This will show the modalwindo

当你的文件已经准备好（有载）代码的开始运行。所以不需要调用window.onload。否则JS_Utils_BuildModal是一个由（）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(); 
    }

我已经改变了我代码来追加和删除一个变量，但功能不能看到var？任何想法为什么？ – Cameron 2010-09-15 12:05:01

答

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


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英寸

 
objModal.hide().fadeIn();

答

我结束了这到底：

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元素

相关推荐