JQuery模态框和iframe

我一直在使用Simple Modal,我觉得它不符合我现在所需要的.

是否有一个Modal Box支持加载外部文件,并允许这些外部文件关闭模式框并将父页面重定向到某个URL.

我想做的一个例子.你有一个用户列表,你可以点击"添加用户"和弹出表格的模态框,你填写并提交.这将关闭该框并重新加载用户列表页面,以便您在列表中看到该用户.

然后,您可以单击"编辑用户",弹出一个模板框,其中填写了表单字段中填写的用户信息,您可以编辑,提交,然后关闭并刷新.

我知道如果我将用户信息表格作为每个用户的隐藏div,但这不能很好地扩展,并且这是很多开销数据.

我在Google Code上找到了一些关于此问题的代码,但却无法使其工作(可能是不同的简单模态版本

我也愿意换成另一个模态框工具.

更新:

从子IFrame元素关闭Thickbox或Fancybox支持吗？

听起来你已经找到了答案,但为了其他人的利益,你可以通过在iFrame中使用以下JavaScript来关闭FancyBox的iFrame实现:

parent.$.fn.fancybox.close();

下面是一个基本的对话框交互,将内容加载到iFrame中,然后从iFrame关闭对话框.

请注意,为了说明这一点,我有两个代码片段.第一个标记为file1.html.第二个你应该命名为"myPage.html",如果你想让它工作并将它放在与第一个文件相同的目录中.

请注意,根据您所需的功能,可以以其他方式使用关闭对话框的调用.例如,另一个例子可能是成功提交表单.

在您的系统上本地创建文件并打开file1.html并试用它.

的file1.html

    
    
    
    
    
    
    
        Go to My Page
        

    

myPage.html下

    
    
    
    
    
    
        Click to close.
    

Fancybox也是另一种选择.与Thickbox类似

编辑:

经过一些游戏后,该插件似乎不支持通过子iframe元素关闭Fancybox.我认为这肯定可以通过一点点努力实现(我开始在这里乱砍一些东西,虽然我强调这只是一个POC并且不起作用,因为iframe中的按钮从DOM中删除了fancybox div包装器因此没有当你再次点击谷歌图片时显示.)我想知道,如果一个iframe是正确的线下去.

对于添加用户,我的想法是,您可以向用户显示模式表单,例如您在单击"登录"时获得的Monster站点上的表单.单击添加用户后,对数据源进行AJAX调用以插入新用户,然后在返回成功时,您可以启动页面刷新或使用AJAX更新列表.

对于编辑用户,一旦选择了用户,您就可以使用用户ID进行AJAX调用,以便在AJAX调用返回成功时使用从数据源检索到的用户详细信息填充模式表单.编辑完用户后,进行AJAX调用以更新数据源,然后再次启动页面刷新或使用AJAX更新列表.

您可以简单地使用JavaScript/jQuery来更新列表/列表详细信息,而不是分别添加或编辑用户,而不是每个场景中的页面刷新或最终AJAX调用.