Question

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

我有这个在document.ready之前播放的gif，我试图在页面准备好后关闭它。我试过了：

<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()，但这似乎是“打破”我的页面，不让页面的其余部分执行。

如何在页面准备好后删除此对话框？

Answer 1

在你的CSS中

#dialog {
display: none;
}

Answer 2

你试过这个吗？

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

Answer 3

首先，在使用jQuery方法之前，最好等待加载DOM（以及JQuery库）。

其次，除非您通过Ajax加载内容，否则显示一个对话框等待框并立即将其删除（在创建对话框和对话框销毁之前的时间非常短）是没有用的。

此外，与destroy一起使用的对话框功能不删除原始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();
    });

});

祝你好运

关于document.ready的JQuery关闭对话框

3 个答案: