JQuery 模态框和 iframe
Posted
技术标签:
【中文标题】JQuery 模态框和 iframe【英文标题】：JQuery Modal Boxes and Iframe 【发布时间】：2010-10-05 11:08:39 【问题描述】：我一直在使用 Simple Modal，但我觉得它不能满足我目前的需求。
是否有一个模态框支持加载外部文件并允许那些外部文件关闭模态框并将父页面重定向到某个url。
我想做的一个例子。您有一个用户列表，您可以单击“添加用户”并弹出一个带有表单的模态框，您填写并提交它。这将关闭该框并重新加载用户列表页面，以便您可以在列表中看到该用户。
然后您可以单击“编辑用户”，然后会弹出一个在表单字段中填写用户信息的模态框，您可以编辑、提交，它会关闭并刷新。
我知道如果我将用户信息表单作为每个用户的隐藏 div 可以做到这一点，但这将无法很好地扩展，而且会产生大量开销数据。
我找到了一些 code about this on Google Code，但无法让它工作（可能是不同的简单模式版本
我也愿意换一个模态框工具。
更新：
Thickbox 或 Fancybox 是否支持从子 IFrame 元素关闭？
【问题讨论】：
Thickbox 已经死了，用别的吧。 （请参阅他们的页面以获取建议） 【参考方案1】：听起来您已经找到了答案，但为了其他人的利益，您可以通过在 iFrame 中使用以下 javascript 来关闭 FancyBox 的 iFrame 实现：
parent.$.fn.fancybox.close();
【讨论】：
【参考方案2】：下面是一个基本的对话框交互，将内容加载到 iFrame 中，然后从 iFrame 关闭对话框。
请注意，为了说明这一点，我有两个代码 sn-ps。第一个标记为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" 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>
【讨论】：
【参考方案3】：Fancybox 也是另一种选择。与Thickbox类似
编辑：
经过一番尝试后，该插件似乎不支持通过子 iframe 元素关闭 Fancybox。我认为这肯定可以通过一点努力来实现（我开始hacking一起here，尽管我强调这只是一个 POC，不能作为iframe 中的按钮从 DOM 中删除了 fancybox div 包装器，因此当您再次单击 google 图像时不会显示）。但是我想知道，如果 iframe 是正确的行。
对于添加用户，我的想法是，您可以向用户提供一个模态表单，例如 Monster site you get when you click 'Sign In.' 上的表单。单击添加用户后，对数据源进行 AJAX 调用以插入新用户返回成功后，您可以启动页面刷新或使用 AJAX 更新列表。
对于编辑用户，一旦选择了用户，您可以使用用户 ID 进行 AJAX 调用，以在 AJAX 调用返回成功时使用从数据源检索到的用户详细信息填充模式表单。完成用户编辑后，进行 AJAX 调用以更新数据源，然后再次启动页面刷新或使用 AJAX 更新列表。
您可以简单地使用 JavaScript/jQuery 来更新列表/列表详细信息，而不是在每个场景中刷新页面或最终调用 AJAX，这取决于用户是否已被添加或编辑。
【讨论】：
我非常感谢您在这方面所做的努力，您使用 AJAX 的想法可能会让我非常接近我想要的。我明天要在工作中检查它，当我发现一些东西时我会更新我的问题。再次感谢。【参考方案4】：parent.$.modal.close(); 适用于简单的模态插件。
【讨论】：
【参考方案5】：我找到了适合我的解决方案，它正在使用 nyroModal。它支持 iframe 并使用此代码通过其 iframe 子项关闭模式。
parent.$.nyroModalRemove();
我将接受 Russ Cam 的回答给他更多的代表，因为他的回答让我思考了很多关于这将如何工作并最终让我找到了答案。
【讨论】：
谢谢 :) 有趣的是，我开始通过调用fancybox 关闭函数来通过iframe 子元素关闭Fancybox 并让它工作。我很高兴你找到了解决方案。你有 nyroModal 的链接吗？【参考方案6】：这是我用firebug跟踪时的对话框脚本
<iframe>
scrolling="auto"
frameborder="0"
title="Dialog Title"
margin
margin
id="modalIFrame"
src="test.php"
</iframe>
我需要将高度更改为 95%，因为对话框滚动始终在屏幕中可见 T.T
【讨论】：
【参考方案7】：你试过ThickBox吗？
【讨论】：
ThickBox 已死。用别的东西。【参考方案8】：我的 FrameDialog 将允许这样做，它基本上在 Dialog 上扩展...如果您使用相同的域，您应该能够调用 $.FrameDialog.close() 但是，如果您正在重定向，您可以简单地重定向父级。 window.parent.location 就可以了。
http://plugins.jquery.com/project/jquery-framedialog
【讨论】：
【参考方案9】：嗨， 任何在 Wordpress 3.0 中使用手动安装 Fancy Box 来关闭 Fancy Box iFrame 时遇到问题的人：
在您的 iframe 中使用此链接：
<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>
它有效:)
【讨论】：
【参考方案10】：这对我有用...
<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
【讨论】：
【参考方案11】：试试colorbox，也不错。
【讨论】：
以上是关于JQuery 模态框和 iframe的主要内容，如果未能解决你的问题，请参考以下文章