59 jquery jquery-ui modal-dialog
AJAX选项卡非常有效.这一部分非常简单.但是,获取AJAX UI对话框模式窗口以触发链接是不成功的.
任何帮助都将不胜感激.
jek*_*jek 121
没有什么比那个男人更容易了.试试这个:
<?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>
请注意,您无法从本地加载远程,因此您必须将其上载到服务器或其他任何位置.另请注意,您无法从外部域加载,因此您应该将链接的href替换为同一域上托管的文档(这里是解决方法).
干杯
CGK*_*CGK 34
为避免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;
});`
小智 24
//格式正确
<script type="text/Javascript">
$(function ()
{
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('mypage.html');
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
And*_*eas 11
只是对nicktea的答案的补充.此代码加载远程页面的内容(不重定向),并在关闭时清除.
<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>
前两个答案都没有为我工作,有多个元素可以打开指向不同页面的对话框.
这感觉就像最干净的解决方案,只在加载时创建对话框对象,然后使用事件来适当地打开/关闭/显示:
$(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;
});
});
cgp*_*cgp -1
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
Open as dialog
</a>
<div id="myDialog">
I have a dialog!
</div>