JQuery模态框和iframe
我一直在使用Simple Modal,我觉得它不符合我现在所需要的。
是否有一个Modal Box支持加载外部文件,并允许这些外部文件关闭模式框并将父页面重定向到某个URL。
我想做的一个例子。 你有一个用户列表,你可以点击“添加用户”和弹出表格的模态框,你填写并提交。 这将关闭该框并重新加载用户列表页面,以便您在列表中看到该用户。
然后,您可以单击“编辑用户”,弹出一个模板框,其中填写了表单字段中填写的用户信息,您可以编辑,提交,然后关闭并刷新。
我知道如果我将用户信息表单作为每个用户的隐藏div,但这不能很好地扩展,并且这是很多开销数据,这可以做到。
我在Google Code上找到了一些关于此的代码,但却无法使其工作(可能是不同的简单模态版本
我也愿意换成另一个模态框工具。
更新:
要么从子IFrame元素关闭Thickbox还是Fancybox支持?
Fancybox也是另一种选择。 与Thickbox类似
编辑:
经过一些游戏后,该插件似乎不支持通过子iframe元素关闭Fancybox。 我认为这肯定可以通过一点点努力实现(我开始在这里 乱砍一些东西,虽然我强调这只是一个POC并且不起作用,因为iframe中的按钮从DOM中删除了fancybox div包装器,因此没有当你再次点击谷歌图片时显示。)我想知道,如果一个iframe是正确的线下去。
对于添加用户,我的想法是,您可以向用户显示模式表单,例如您在单击“登录”时获得的Monster站点上的表单。 单击添加用户后,对数据源进行AJAX调用以插入新用户,然后在返回成功时,您可以启动页面刷新或使用AJAX更新列表。
对于编辑用户,一旦选择了用户,您就可以使用用户ID进行AJAX调用,以便在AJAX调用返回成功时使用从数据源检索到的用户详细信息填充模式表单。 编辑完用户后,进行AJAX调用以更新数据源,然后再次启动页面刷新或使用AJAX更新列表。
您可以简单地使用JavaScript / jQuery来更新列表/列表详细信息,而不是分别添加或编辑用户,而不是每个场景中的页面刷新或最终AJAX调用。
听起来你已经找到了答案,但为了其他人的利益,你可以通过在iFrame中使用以下JavaScript来关闭FancyBox的iFrame实现:
parent.$.fn.fancybox.close();
下面是一个基本的对话框交互,将内容加载到iFrame中,然后从iFrame关闭对话框。
请注意,为了说明这一点,我有两个代码片段。 第一个标记为file1.html。 第二个你应该命名为“myPage.html”,如果你想让它工作并将它放在与第一个文件相同的目录中。
请注意,根据您所需的function,可以以其他方式使用关闭对话框的调用。 例如,另一个例子可能是成功提交表单。
在您的系统上本地创建文件并打开file1.html并试用它。
的file1.html
Go to My Page
myPage.html下
Click to close.
parent.$.modal.close();
适用于简单的模态插件。
我找到了解决方案,它使用的是nyroModal。 它使用此代码通过iframe子项支持iframe和关闭模态。
parent.$.nyroModalRemove();
我将接受Russ Cam的回答给他更多的代表,因为他的回答让我思考了很多关于这将如何起作用并最终让我找到答案。
当我用firebug追踪时,这是对话脚本
我需要将高度更改为95%,因为对话框滚动始终在屏幕TT中可见
你试过ThickBox吗?
我的FrameDialog将允许这个,它基本上扩展到Dialog …如果你使用相同的域,你应该能够调用$ .FrameDialog.close()但是,如果你重定向,你可以简单地重定向父母。 window.parent.location会这样做。
这对我有用……
试试colorbox它也是一个很好的。