abe*_*bel 45 ajax jquery dialog modal-dialog
目前我的模态对话框是这样的
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
</head>
<body>
<div id="dialog" title="Title Box">
<p>Stuff here</p>
</div>
<script type="text/javascript">
jQuery(
function() {
jQuery("#dialog")
.dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
}
);
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body>
</html>
加载的Div包含在同一页面中.如何在显示对话框时将该div移动到第二页并通过Ajax加载内容？我可以重用脚本来根据需要加载不同的内容吗？
Sam*_*Sam 73
看看来自Nemikor的这篇博文,它应该做你想要的.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
基本上,在调用"打开"之前,您首先"加载"来自其他页面的内容.
jQuery('#dialog').load('path to my page').dialog('open');
Fri*_*ons 14
试着用这个.
$(document).ready(function(){
$.ajax({
url: "yourPageWhereToLoadData.php",
success: function(data){
$("#dialog").html(data);
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
});
小智 7
$(function () {
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('Sample.htm');
},
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
});
});
http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName ).remove();
$('BODY').append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
Ajax-Request加载对话框，将它们添加到当前页面的主体并打开对话框。
如果只想加载内容，则可以执行以下操作：
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName).append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});