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

可以用jQueryUI对话框加载另一个页面吗

比如Dialog+Ajax

---

谢谢

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

如果要使用Ajax将内容加载到对话框中，可以轻松使用$。加载：

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

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

---

检查一个例子。

如果您特别需要或想要一个iFrame，而不是将内容注入dom，我这里有一个扩展：

JQuery UI对话框的设计需要对现有内容进行操作。通常在示例中，这是一个取自DOM的现有

主体的
DIV

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

另一种方法（）是：

不同之处在于，您可以通过编程方式创建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');
}

我宁愿等到我有了创建对话框的内容。对我来说，这似乎更直截了当。此外，自动调整大小在其他情况下似乎不起作用：

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

$.ajax({
“url”：contentUrl，
“成功”：函数成功（数据、文本状态、xhr）{
$（“”+数据+“”）。对话框({
“宽度”：“自动”，
“高度”：“自动”，
“close”：函数（e，ui）{$（this.remove（）；}
});
}
});
re:@ahmet的评论——这不是两种不同的方式。就一个！
    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });