Question

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

与Dialog + Ajax一样

由于

Answer 1

如果要使用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。

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

5 个答案: