UI 对话框模态窗口在第二次单击时充当模态窗口

发布于 2025-01-07 03:51:58 字数 1255 浏览 5 评论 0原文

我的 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/

原文

I have problem with Jquery UI dialog,when i click the button the first time, it does show the dialog but not in modal dialog, but when you click it the second time, it show it correctly as a modal dialog

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

Here is the code for the button click event

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

see this link to test the above code

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

比忠 2025-01-14 03:51:58

我将这样做。

您声明了一个变量 dialog，因此随后使用它
直接检查 #dialog 元素是否为通过 dialog.length 找到。如果它是空的，请创建您的标记
使用选项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');
    }
});

演示

Here is how I would do it.

You declare a variable dialog so use it afterwards
Check directly if a #dialog element was found with dialog.length. In case it's empty, create your markup
Initialize your dialog with the option autoOpen: false. This way the dialog is initialized once and for all but it will remain hidden.
In your ajax callbacks, call the open method to show the dialog with dialog.dialog('open'). As a side note, it seems more logic to set the content of the dialog and then open it.