JQuery在document.ready上關閉對話框

<div id="dialog"><img src="images/load.gif"/></div>

我有這個在document.ready之前播放的gif，我試圖在頁面準備好後關閉它。我曾嘗試：JQuery在document.ready上關閉對話框

<script type="text/javascript"> 
$("#dialog").dialog('option', 'dialogClass', 'alert'); //show dialog modal while page is loading 

$(document).ready(function() { //document is ready, close loading gif 
$("#dialog").dialog('destroy');

此代碼的工作，但它不會刪除加載GIF，它仍然顯示在頁面上。我曾嘗試添加$('#dialog').remove()，但這似乎是通過不讓頁面的其餘部分執行來「破壞」我的頁面。

如何在頁面準備就緒時刪除此對話框？

來源

2012-10-09 Norse

我會建議你對話ID重命名爲更多的指定，像「加載「 –

在你的CSS

#dialog { 
display: none; 
}

來源

2012-10-09 01:39:35

你試過嗎？

$("#dialog").hide();

來源

2012-10-09 01:42:21 Felix

首先，在使用jQuery方法之前最好等待DOM加載（以及JQuery庫）。其次，除非通過Ajax加載內容，否則顯示對話框等待框並立即將其刪除（創建對話框和對話框銷燬之前的時間非常短）是沒有用的。

此外，對話功能，用於銷燬，不要刪除原來的HTML代碼。它僅刪除對話框創建期間對話框插件所做的所有修改。

所以，當你應用

$("#dialog").dialog('destroy');

您只能刪除被包裹的對話框HTML和身邊的結構的

<div id="dialog"><img src="images/load.gif"/></div>

但不是DIV它的自我。

在我看來，最好的方法是添加經典的HTML和CSS的微調，當頁面加載和jQuery加載時，稍等一會，然後將其刪除。

你可以讓這片CSS

#dialog 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0.8; 
    background-color: grey; 
    text-align: center; 
    padding-top: 50px; 
}

和這段JavaScript

$(document).ready(function() { 

    // Wait a short delay, animate opacity and finally remove 
    $("#dialog").delay(300).animate({ 
     "opacity" : 0 
    }, 500, function() { 
     $("#dialog").remove(); 
    }); 

});

好運的

來源

2012-10-09 01:43:18 MatRt

#dialog不需要位置絕對和其他的東西，jquery-ui自己做，只需要初始div隱藏，這將有助於 –

如果你rea d，我建議在DOM內容加載事件之前不要使用jQuery-ui對話框，只需簡單的HTML和CSS即可。對於像jQuery一樣加載的JS更安全，更快速。 – MatRt

最好是建議不要在這種情況下使用JavaScript ...嗯，我有想法 - 在獨立的CSS制定規則，繪製對話框，在HTML頂部顯示div與對話框，在HTML結束後做出CSS定義定義類似'#loading {display：none;}'的東西 –

JQuery在document.ready上關閉對話框

回答

相關問題