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

【问题标题】：how to load a page with jquery ui dialog如何使用 jquery ui 对话框加载页面
【发布时间】：2010-12-09 03:47:58
【问题描述】：

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

喜欢Dialog + Ajax

谢谢

【问题讨论】：

【解决方案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。

【讨论】：

回复：@ahmet 的评论 - 这不是两种不同的方式。只有一个！

【解决方案2】：

JQuery UI 对话框的设计使得它需要现有的内容来操作。通常在示例中，这是取自 DOM 的现有 BODY 的 DIV。

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

另一种方法 (inspired by this) 在这里：

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

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'); 替换为以下内容。这也将允许它正确居中而无需额外的工作。

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

当然，只需在对话框的 HTML 中包含一个 iframe。

【讨论】：

【解决方案5】：

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

【讨论】：