如何使用 jquery ui 对话框加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1608249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to load a page with jquery ui dialog
提问by Utku Dalmaz
is that possible to load another page with jquery ui dialog ?
是否可以使用 jquery ui 对话框加载另一个页面？
Like Dialog + Ajax
喜欢 Dialog + Ajax
Thanks
谢谢
回答by CMS
If you want to load content into a dialog using Ajax, you can easily use $.load:
如果要使用 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');
Check an example here.
在此处查看示例。
回答by Simon_Weaver
The design of the JQuery UI dialog is such that it needs existing content to operate upon. Typically in examples this is a DIVtaken from the existing BODYof the DOM.
JQuery UI 对话框的设计使其需要现有内容来操作。通常在示例中，这是DIV从现有BODY的 DOM 中获取的。
There are cases though where adding markup to existing pages just to create a dialog - especially if the content is loaded by AJAX - causes problems. For instance, you may have a JavaScript library that may be called from a number of pages and don't want to add markup to each one of them.
但在某些情况下，将标记添加到现有页面只是为了创建一个对话框 - 特别是如果内容是由 AJAX 加载的 - 会导致问题。例如，您可能有一个可以从多个页面调用的 JavaScript 库，并且不想为每个页面添加标记。
An alternative way (inspired by this) is here :
另一种方式（受此启发）在这里：
The difference being that you create the DIV programmatically (will be automatically added to the DOM) - and when the dialog closes we destroy it completely - and remove it from the DOM on the 'close' event.
不同之处在于您以编程方式创建 DIV（将自动添加到 DOM） - 当对话框关闭时，我们将其完全销毁 - 并在 'close' 事件中将其从 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');
}
Replace dialog1.load(contentUrl).dialog('open');with the following if you do not want the dialog to open (and potentially flicker) until the content is loaded. This will also allow it to be properly centered without additional work.
dialog1.load(contentUrl).dialog('open');如果您不希望对话框在加载内容之前打开（并且可能闪烁），请替换为以下内容。这也将允许它在没有额外工作的情况下正确居中。
dialog1.load(contentUrl, function () {
$(this).dialog('open');
});
回答by Aryeh Leib Taurog
I prefer to wait until I have the content to create the dialog. It seems more straightforward to me. Also, auto-sizing doesn't seem to work otherwise:
我更喜欢等到我有内容来创建对话框。对我来说似乎更直接。此外，自动调整大小似乎不起作用：
$.ajax({
'url': contentUrl,
'success': function success(data, textStatus, xhr) {
$("<div>" + data + "</div>").dialog({
"width": "auto",
"height": "auto",
"close": function (e, ui) { $(this).remove(); }
});
}
});
回答by Justin Ethier
Sure, just include an iframe in your dialog's HTML.
当然，只需在对话框的 HTML 中包含一个 iframe。
回答by Tracker1
If you specifically need or want an iFrame instead of injected content into the dom, I have an extension for that here: http://plugins.jquery.com/project/jquery-framedialog
如果您特别需要或想要 iFrame 而不是将内容注入 dom，我在这里有一个扩展：http: //plugins.jquery.com/project/jquery-framedialog
