Jquery ui 用户界面对话框模态窗口在第二次单击时作为模态窗口工作_Jquery Ui_Jquery_Dialog_Window_Modal Dialog

Jquery ui 用户界面对话框模态窗口在第二次单击时作为模态窗口工作

jquery-ui jquery

Jquery ui 用户界面对话框模态窗口在第二次单击时作为模态窗口工作,jquery-ui,jquery,dialog,window,modal-dialog,Jquery Ui,Jquery,Dialog,Window,Modal Dialog,我对jQueryUI对话框有问题，当我第一次单击按钮时，它确实会显示对话框，但不会显示在模式对话框中，但是当你第二次单击它时，它会正确地显示为模式对话框 $('.ajax').live('click', function () { var url = "/home/test"; var dialog = $("#dialog"); $( "#dialog" ).dialog({ height: 140, title:"Title",

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

$('.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;
});

$（'.ajax'）.live（'click'，function（）
{
var url=“/home/test”；
变量对话框=$（“#对话框”）；
$（“#对话框”）。对话框({
身高：140，
标题：“标题”，
莫代尔：对
});
如果（$（“#对话框”）.length==0
{
dialog=$（''）.appendTo（'body'）；
}
$.ajax(
{
url:url，
发送前：函数（jqXHR，设置）
{
//显示动画gif
},
完成：函数（jqXHR，textStatus）
{
//隐藏动画gif
},
成功：函数（数据、文本状态、jqXHR）
{
dialog.dialog（）.html（数据）；
},
错误：函数（jqXHR、textStatus、errorshown）
{
dialog.dialog（）.html（“发生错误…”）；
}
});
返回false；
});

下面是按钮单击事件的代码

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

打开对话框

请参阅此链接以测试上述代码

以下是我将如何做到这一点

您声明了一个变量

对话框

，所以以后使用它

直接检查是否使用

dialog.length

找到了#dialog元素。如果为空，请创建标记

使用选项

autoOpen:false

初始化对话框。这样，对话框将被一次性初始化，但它将保持隐藏状态

在ajax回调中，调用open方法以显示带有

dialog.dialog（'open'）

的对话框。作为旁注，设置对话框的内容然后打开它似乎更符合逻辑

进一步阅读：

以下是修改后的代码：

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');
    }
});

var dialog=$（“#dialog”）；
如果（dialog.length==0）{
dialog=$（''）.appendTo（'body'）；
对话({
身高：140，
标题：“标题”，
莫代尔：是的，
自动打开：错误
});
}
$.ajax({
url:url，
...
成功：函数（数据、文本状态、jqXHR）{
dialog.html（data.dialog（'open'）；
},
错误：函数（jqXHR、textStatus、errorshown）{
html（“发生错误…”）。dialog（“打开”）；
}
});