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上关闭对话框

回答

相关问题