jQuery：通过Ajax加载modal 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加载内容？ 我可以重复使用脚本来根据需要加载不同的内容吗？
看看这个Nemikor的博客文章，应该做你想做的。
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
基本上，在调用“打开”之前，先从其他页面加载内容。
jQuery('#dialog').load('path to my page').dialog('open');
尝试使用这一个。
$(document).ready(function(){ $.ajax({ url: "yourPageWhereToLoadData.php", success: function(data){ $("#dialog").html(data); } }); $("#dialog").dialog( { bgiframe: true, autoOpen: false, height: 100, modal: true } ); });
$(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); } });
<button class="btn" onClick="openDialog('New Type','Sample.html')">Middle</button> <script type="text/javascript"> function openDialog(title,url) { $('.opened-dialogs').dialog("close"); $('<div class="opened-dialogs">').html('loading...').dialog({ position: ['center',20], open: function () { $(this).load(url); }, close: function(event, ui) { $(this).remove(); }, title: title, minWidth: 600 }); return false; } </script>
可能这个代码可能会给你一些想法。
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
$(document).ready(function() { $('#page-help').each(function() { var $link = $(this); var $dialog = $('<div></div>') .load($link.attr('href')) .dialog({ autoOpen: false, title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); }); });
