jQuery UI 对话框 - X 秒后关闭

jQuery UI Dialog - close after X seconds

本文关键字：UI 对话框 jQuery      更新时间：2023-09-26

这段代码运行良好，除了 - 对话框窗口不会像我预期的那样在 X 毫秒后关闭......

setTimeout函数被执行（我把alert（）放在那里，它起作用了...），所以我认为问题出在$("#alert div").dialog('close');，但我不知道出了什么问题......

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            setTimeout(function() {
                $("#alert div").dialog('close');
            }, 2000);
        }
    });
}

编辑：如果有帮助，这里是 HTML：

<div id="alert">
    <span>Password change</span>
    <div>Password was successfully changed.</div>
</div>

解决！如果有人知道为什么我的代码不起作用，那就太好了......

您有一个范围问题。试试这个jsFiddle示例：

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            var foo = $(this);
            setTimeout(function() {
               foo.dialog('close');
            }, 2000);
        }
    });
}​

发生这种情况并且不像您预期的那样工作的原因是您引用成为对话框的目标div 的方式，以及 jQuery UI 构建对话框的方式。如果您查看开发人员控制台，您会发现 jQuery 将您的div 从它在 DOM 中的原始位置拉出，因此#alert div不再可以引用，因为它不再是 #alert 的子项。如果您为该div 提供了自己的 ID，它将按预期工作，并且您不需要临时变量来引用它。

经过测试和工作的现场演示：

http://jsfiddle.net/oscarj24/q6tD9/2/

我认为这样更好：

jQuery.fn.exists = function(){return this.length>0;}
$(function() {
    if($('#alert').exists()){
        var modal = $('#alert div');
        modal.dialog({ title: $('#alert span').text(), modal: true });
        var opened = modal.dialog('isOpen');
        if(opened){
            setTimeout(function(){ 
               modal.dialog('close'); 
            }, 2000);
        }
    }
});​
相关文章：