jQuery：通过 Ajax 加载模态对话框内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3837166/
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: Load Modal Dialog Contents via Ajax
提问by abel
Currently my Modal Dialog is like this
目前我的模态对话框是这样的
<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>
The Div that is loaded is included in the same page. How do I move that div to a second page and load the contents via Ajax when the dialog is shown? And can I reuse the script to load different contents as per need?
加载的 Div 包含在同一页面中。显示对话框时，如何将该 div 移动到第二页并通过 Ajax 加载内容？我可以重用脚本来根据需要加载不同的内容吗？
回答by Sam
Check out this blog post from Nemikor, which should do what you want.
查看 Nemikor 的这篇博客文章，它应该可以满足您的需求。
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
Basically, before calling 'open', you 'load' the content from the other page first.
基本上，在调用“open”之前，您首先从另一个页面“加载”内容。
jQuery('#dialog').load('path to my page').dialog('open');
回答by Fribu - Smart Solutions
try to use this one.
尝试使用这个。
$(document).ready(function(){
$.ajax({
url: "yourPageWhereToLoadData.php",
success: function(data){
$("#dialog").html(data);
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
});
回答by temp2010
$(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
http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html
回答by Floyd
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName ).remove();
$('BODY').append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
The Ajax-Request load the Dialog, add them to the Body of the current page and open the Dialog.
Ajax-Request 加载 Dialog，将它们添加到当前页面的 Body 并打开 Dialog。
If you only whant to load the content you can do:
如果您只想加载内容，您可以：
var dialogName = '#dialog_XYZ';
$.ajax({
url: "/ajax_pages/my_page.ext",
data: {....},
success: function(data) {
$(dialogName).append(data);
$(dialogName )
.dialog(options.dialogOptions);
}
});
回答by Sergey Kharchishin
<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>
回答by Thomas
may be this code may give you some idea.
可能是这段代码可能会给你一些想法。
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
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;
});
});
});
