AJAX样式jQuery UI选项卡中加载的jQuery UI对话框窗口
AJAX样式jQuery UI选项卡中加载的jQuery UI对话框窗口
提问于 2009-05-01 04:56:58
AJAX选项卡可以很好地工作。这一部分非常简单。但是，让AJAX UI Dialog模式窗口触发链接并不成功。
在这方面的任何帮助都将不胜感激。
回答 7
Stack Overflow用户
发布于 2009-09-25 12:13:54
没有什么比那个人更容易的了。试试这个：
<?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>请注意，您不能从本地加载远程，因此您必须将其上传到服务器或其他任何地方。还请注意，您不能从外部域加载，因此您应该替换指向同一域(和here's the workaround)上托管的文档的链接的href。
干杯
Stack Overflow用户
发布于 2011-02-12 05:30:52
为了避免在多次单击链接时添加额外的div，并避免在使用脚本显示表单时出现问题，您可以尝试@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;
});`Stack Overflow用户
发布于 2011-02-11 02:47:29
//格式正确
<script type="text/Javascript">
$(function ()
{
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('mypage.html');
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/809035
复制相关文章
相似问题