UI Dialog 模态窗口在第二次单击时用作模态窗口

Question

我的 Jquery UI 对话框有问题，当我第一次单击按钮时，它确实显示对话框但不在模态对话框中，但是当你第二次单击它时，它会正确显示为模态对话框

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");

    $( "#dialog" ).dialog({
        height: 140,
        title:"Title",
        modal: true
    });


    if ($("#dialog").length == 0)
    {
        dialog = $('<div id="dialog"></div>').appendTo('body');
    }
    $.ajax(
        {
            url: url,
            beforeSend: function (jqXHR, settings)
            {
                //show an animated gif
            },
            complete: function (jqXHR, textStatus)
            {
                //hide the animated gif
            },
            success: function (data, textStatus, jqXHR)
            {
                dialog.dialog().html(data);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                dialog.dialog().html("An error occured...");
            }
        });

    return false;
});

这里是按钮点击事件的代码

<button class="ajax">open dialog</button>

查看此链接以测试上述代码

http://jsfiddle.net/jRPfu/13/

Answer 1

我会这样做。

1. 你声明了一个变量dialog，所以之后使用它

2. 直接检查是否使用dialog.length 找到#dialog 元素。如果它是空的，请创建您的标记

3. 使用选项 autoOpen: false 初始化您的对话框。这样，对话框将一劳永逸地初始化，但仍将保持隐藏状态。

4. 在您的 ajax 回调中，调用 open 方法以显示带有dialog.dialog('open') 的对话框。顺便说一句，设置对话框的内容然后打开它似乎更符合逻辑。

进一步阅读：

• autoOpen option
• open method

这是修改后的代码：

var dialog = $("#dialog");

if (dialog.length == 0) {

    dialog = $('<div id="dialog"></div>').appendTo('body');

    dialog.dialog({
        height: 140,
        title: "Title",
        modal: true,
        autoOpen: false
    });

}

$.ajax({
    url: url,
    ...
    success: function(data, textStatus, jqXHR) {
        dialog.html(data).dialog('open');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        dialog.html("An error occured...").dialog('open');
    }
});

DEMO