在 AJAX 样式的 jQuery UI 选项卡中加载的 jQuery UI 对话框窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/809035/
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
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
提问by jek
The AJAX tabs work perfectly well. It's pretty straightforward with that part. However, getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful.
AJAX 选项卡工作得很好。这部分非常简单。但是，让 AJAX UI 对话框模式窗口从链接触发是不成功的。
Any help in this would be appreciated.
在这方面的任何帮助将不胜感激。
回答by jek
Nothing easier than that man. Try this one:
没有什么比那个男人更容易的了。试试这个：
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style>
.loading { background: url(/img/spinner.gif) center no-repeat !important}
</style>
</head>
<body>
<a class="ajax" href="http://www.google.com">
Open as dialog
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
// show a spinner or something via css
var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
// open the dialog
dialog.dialog({
// add a close listener to prevent adding multiple divs to the document
close: function(event, ui) {
// remove div with all data and events
dialog.remove();
},
modal: true
});
// load remote content
dialog.load(
url,
{}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
function (responseText, textStatus, XMLHttpRequest) {
// remove the loading class
dialog.removeClass('loading');
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
</body>
</html>
Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and here's the workaround).
请注意，您无法从本地远程加载，因此您必须将其上传到服务器或其他任何地方。另请注意，您无法从外部域加载，因此您应该将链接的 href 替换为同一域上托管的文档（这是解决方法）。
Cheers
干杯
回答by CGK
To avoid adding extra divs when clicking on the link multiple times, and avoid problems when using the script to display forms, you could try a variation of @jek's code.
为了避免div在多次单击链接时添加额外的s，并避免在使用脚本显示表单时出现问题，您可以尝试@jek 代码的变体。
$('a.ajax').live('click', function() {
var url = this.href;
var dialog = $("#dialog");
if ($("#dialog").length == 0) {
dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
}
// load remote content
dialog.load(
url,
{},
function(responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});`
回答by nicktea
//Properly Formatted
//格式正确
<script type="text/Javascript">
$(function ()
{
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('mypage.html');
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
回答by Andreas
Just an addition to nicktea's answer. This code loads the content of a remote page (without redirecting there), and also cleans up when closing it.
只是尼克茶答案的补充。此代码加载远程页面的内容（不重定向），并在关闭它时进行清理。
<script type="text/javascript">
function showDialog() {
$('<div>').dialog({
modal: true,
open: function () {
$(this).load('AccessRightsConfig.htm');
},
close: function(event, ui) {
$(this).remove();
},
height: 400,
width: 600,
title: 'Ajax Page'
});
return false;
}
</script>
回答by Cory
Neither of the first two answers worked for me with multiple elements that can open dialogs that point to different pages.
前两个答案都不适合我使用多个元素可以打开指向不同页面的对话框。
This feels like the cleanest solution, only creates the dialog object once on load and then uses the events to open/close/display appropriately:
这感觉是最干净的解决方案，只在加载时创建一次对话框对象，然后使用事件适当地打开/关闭/显示：
$(function () {
var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body');
ajaxDialog.dialog({autoOpen: false});
$('a.ajax-dialog-opener').live('click', function() {
// load remote content
ajaxDialog.load(this.href);
ajaxDialog.dialog("open");
//prevent the browser from following the link
return false;
});
});
回答by Cory
curious - why doesn't the 'nothing easier than this' answer (above) not work? it looks logical? http://206.251.38.181/jquery-learn/ajax/iframe.html
好奇 - 为什么“没有比这个更容易”的答案（上面）不起作用？看起来合乎逻辑？ http://206.251.38.181/jquery-learn/ajax/iframe.html
回答by cgp
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>
