我一直在使用 Simple Modal，我觉得它不能满足我目前的需要。
是否有支持加载外部文件并允许这些外部文件关闭模态框并将父页面重定向到某个 url 的模态框。
我想做的一个例子。您有一个用户列表，您可以单击“添加用户”并弹出一个带有表单的模态框，您填写并提交它。这将关闭该框并重新加载用户列表页面，以便您在列表中看到该用户。
然后您可以单击“编辑用户”，然后会弹出一个在表单字段中填写用户信息的模态框，您可以编辑、提交，它会关闭并刷新。
我知道如果我将用户信息表单作为每个用户的隐藏 div 可以做到这一点，但这不会很好地扩展，而且它是很多开销数据。
我在 Google Code 上找到了一些关于此的代码，但无法让它工作（可能是不同的简单模式版本
我也愿意换成另一个模态框工具。
更新：
Thickbox 或 Fancybox 是否支持从子 IFrame 元素关闭？
听起来您已经找到了答案，但为了其他人的利益，您可以通过在 iFrame 中使用以下 JavaScript 来关闭 FancyBox 的 iFrame 实现：
parent.$.fn.fancybox.close();
下面是一个基本的对话框交互，将内容加载到 iFrame 中，然后从 iFrame 关闭对话框。
请注意，为了说明这一点，我有两个代码片段。第一个标记为file1.html。第二个你应该命名为“myPage.html”，如果你想让它工作并将它放在与第一个文件相同的目录中。
请注意，关闭对话框的调用可以根据您所需的功能以其他方式使用。例如，另一个示例可能是成功提交表单。
在您的系统上本地创建文件并打开 file1.html 并尝试一下。
文件1.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>
我的页面.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>
Fancybox也是另一种选择。工作原理类似于厚盒
编辑：
经过一番玩弄之后，该插件本身不支持通过子 iframe 元素关闭 Fancybox。我认为这肯定可以通过一点努力来实现（我开始在这里拼凑一些东西，尽管我强调这只是一个 POC 并且不起作用，因为 iframe 中的按钮从 DOM 中删除了 fancybox div 包装器，因此没有当您再次单击谷歌图像时显示）。但是我想知道，如果 iframe 是正确的行。
对于添加用户，我的想法是您可以向用户展示一种模式表单，就像您在单击“登录”时获得的 Monster 网站上的那种。单击添加用户后，对数据源进行 AJAX 调用以插入新用户，然后返回成功后，您可以启动页面刷新或使用 AJAX 更新列表。
对于编辑用户，一旦选择了用户，您可以使用用户 ID 进行 AJAX 调用，以在 AJAX 调用返回成功时使用从数据源检索到的用户详细信息填充模式表单。完成用户编辑后，进行 AJAX 调用以更新数据源，然后再次启动页面刷新或使用 AJAX 更新列表。
您可以简单地使用 JavaScript/jQuery 来更新列表/列表详细信息，而不是在每个场景中进行页面刷新或最终 AJAX 调用，具体取决于用户是否已被添加或编辑。
parent.$.modal.close();适用于简单的模态插件。
我已经为我找到了解决方案，它使用的是 nyroModal。它支持 iframe 并使用此代码通过其 iframe 子项关闭模式。
parent.$.nyroModalRemove();
我将接受 Russ Cam 的回答给他更多的代表，因为他的回答让我思考了很多关于这将如何工作并最终让我找到答案。
这是我用萤火虫跟踪时的对话框脚本
<iframe>
scrolling="auto"
height="100%"
frameborder="0"
width="100%"
title="Dialog Title"
marginheight="0"
marginwidth="0"
id="modalIFrame"
src="test.php"
</iframe>
我需要将高度更改为 95%，因为对话框滚动始终在屏幕 TT 中可见
你试过厚盒吗？
我的 FrameDialog 将允许这样做，它基本上在 Dialog 上扩展......如果您使用相同的域，您应该能够调用 $.FrameDialog.close() 但是，如果您正在重定向，您可以简单地重定向父母。window.parent.location 会做。
嗨，任何在 Wordpress 3.0 中使用手动安装 Fancy Box 来关闭 Fancy Box iFrame 时遇到问题的人：
在您的 iframe 中使用此链接：
<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>
有用 ：）
这对我有用...
<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
试试colorbox，它也是一个不错的选择。