如何使用jquery ui对话框加载页面

时间:2009-10-22 16:00:34

标签: jquery ajax jquery-ui dialog

是否可以使用jquery ui对话框加载另一个页面?

与Dialog + Ajax一样

由于

5 个答案:

答案 0 :(得分:17)

如果要使用Ajax将内容加载到对话框中,可以轻松使用$ .load:

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

查看示例here

答案 1 :(得分:9)

JQuery UI对话框的设计使得它需要对现有内容进行操作。通常在示例中,这是来自DOM的现有DIV的{​​{1}}。

有些情况下,为现有页面添加标记只是为了创建一个对话框 - 特别是如果内容是由AJAX加载的 - 会导致问题。例如,您可能有一个可以从多个页面调用的JavaScript库,并且不希望为每个页面添加标记。

另一种方式(inspired by this)在这里:

不同之处在于您以编程方式创建DIV(将自动添加到DOM中) - 当对话框关闭时我们完全销毁它 - 并在'close'事件中将其从DOM中删除。

BODY

如果您不想在加载内容之前打开对话框(并可能会闪烁),请将function JQDialog(title, contentUrl, params) { var dialog1 = $("<div>").dialog( { autoOpen: false, modal: true, title: title, close: function (e, ui) { $(this).remove(); }, buttons: { "Ok": function () { $(this).dialog("close"); } } }); dialog1.load(contentUrl).dialog('open'); } 替换为以下内容。这也可以让它在没有额外工作的情况下正确居中。

dialog1.load(contentUrl).dialog('open');

答案 2 :(得分:3)

我更愿意等到我有内容来创建对话框。对我来说似乎更直截了当。此外,自动调整大小似乎不起作用:

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

答案 3 :(得分:1)

当然,只需在对话框的HTML中加入iframe。

答案 4 :(得分:0)

如果你特别需要或想要一个iFrame而不是将内容注入到dom中,我在这里有一个扩展:http://plugins.jquery.com/project/jquery-framedialog