是否可以使用jquery ui对话框加载另一个页面?
与Dialog + Ajax一样
由于
答案 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