下面是一个基本对话框交互,将内容加载到iFrame中,然后从iFrame关闭对话框。
请注意,为了说明这一点,我有两个代码片段。第一个标签为file1.html。第二个你应该命名为“myPage.html”,如果你想要它的工作,并把它放在与第一个文件相同的目录中。
请注意,关闭对话框的调用可以根据您所需的功能以其他方式使用。例如,另一个例子可能是成功的表单提交。
在您的系统本地创建文件并打开file1.html并试用。
的file1.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#modalDiv").dialog({
modal: true,
autoOpen: false,
height: '180',
width: '320',
draggable: true,
resizeable: true,
title: 'IFrame Modal Dialog'
});
$('#goToMyPage').click(
function() {
url = 'myPage.html';
$("#modalDiv").dialog("open");
$("#modalIFrame").attr('src',url);
return false;
});
});
</script>
</head>
<body>
<a id="goToMyPage" href="#">Go to My Page</a>
<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
</body>
</html>
myPage.html下
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#clickToClose').click(
function() {
window.parent.$("#modalDiv").dialog('close');
return false;
});
// uncomment and use the below line close when document is ready (no click action by user needed)
// the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
// window.parent.$("#modalDiv").dialog('close');
});
</script>
</head>
<body>
<a id="clickToClose" href="#">Click to close.</a>
</body>
</html>
Thickbox已死,请使用别的东西。 (请参阅他们的页面以获得建议) – dland 2011-04-12 09:47:45