jQuery的隱藏和顯示DOM元素

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頁面加載時建立模式的最佳方式？

編輯：改變它，以便模式是一個變量，當用戶運行其中一個功能時，我想追加和刪除該變量。我還需要在添加或刪除模塊之前檢查模塊是否已經存在！

感謝。

Answer 1

變化

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

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

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