Question

我正在尝试创建一些模态窗口，使用AJAX和jQuery UI对话框小部件动态加载其内容。我们的想法是，当用户请求某些内容时，对话框将仅存在于页面上，然后在用户单击关闭按钮时再次将其删除。然而，对于我当前的代码，我有两个问题：1。）在从我所知道的请求之前页面上存在对话框2.）当用户关闭模态时，除非刷新页面，否则无法再次打开它。

我的应用中有以下代码：

$('.ajax').live('click', function()
        {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0)
            {
                dialog = $('<div id="dialog"></div>').appendTo('body');
            }
            dialog.load(
                    url,
                    {},
                    function(responseText, textStatus, XMLHttpRequest)
                    {
                        dialog.dialog();
                    }
                );
            return false;
        });

非常感谢任何帮助。感谢

Answer 1

以下是您需要的代码或在那里进行测试：demo

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");
    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模式窗口的jQuery UI对话框

1 个答案: