JQuery模态框和iframe [英] JQuery Modal Boxes and Iframe

问题描述

我一直在使用Simple Modal，我觉得它不符合我现在的需要。

I've been using Simple Modal and i feel it doesn't live up to what i need at the moment.

是否有支持加载的模态盒外部文件并允许这些外部文件关闭模式框并将父页面重定向到某个URL。

Is there a Modal Box that supports loading external files and allows those external files to close the modal box and redirect the parent page to some url.

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

An example of what i want to do. You have a list of users, you could click "Add user" and a Modal Box with the form pops up, you fill that in and submit it. That would close the box and reload the user list page so you would see the user in the list.

然后您可以单击编辑用户和一个模态框表单字段中填写的用户信息会弹出，您可以编辑，提交，然后关闭并刷新。

Then you could click "Edit user" and a Modal Box with the user info filled in the form fields would pop up and you could edit, submit and it would close and refresh.

我知道如果我有用户信息可以这样做形成一个隐藏的div为每个用户，但这不会很好地扩展，它是很多开销数据。

I know this can be done if i have the user info form as a hidden div for each user but this will not scale well and it is a lot of overhead data.

我发现了一些关于Google代码的相关代码但是可以'让它工作（可能是不同的简单模态版本

I found some code about this on Google Code but just can't get it to work (possibly different simple modal version

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

I am willing to change to another modal box tool also.

更新：

是否从子IFrame元素中关闭了Thickbox或Fancybox支持？

Do either Thickbox or Fancybox support being closed from a child IFrame element?

推荐答案

Fancybox 也是另一种选择。与Thickbox的工作方式类似

Fancybox is also another option. Works similarly to Thickbox

编辑：

有些玩游戏后出现该插件本身不支持通过子iframe元素关闭Fancybox。我认为这可以通过一点努力实现（我开始 黑客攻击 一起这里，虽然我强调这只是一个POC并且不起作用，因为iframe中的按钮从DOM中移除了fancybox div包装器，因此当你再次点击谷歌图像时不显示。）我想知道，如果一个iframe是正确的下线。

It appears after some playing around that the plugin does not natively support closing the Fancybox through an child iframe element. I think that this is certainly achievable with a little effort (I started hacking together something here, although I stress that this was simply a POC and does not work as the button within the iframe removes the fancybox div wrapper from the DOM and therefore does not display when you click the google image again).I am wondering however, if an iframe is the right lines to go down.

对于添加用户，我的想法是你可以向用户呈现一个模态形式，如单击登录时 Monster网站上的那个。点击后添加用户，对数据源进行AJAX调用以插入新用户，然后在返回成功时，您可以启动页面刷新或使用AJAX更新列表。

For adding a user, my thought would be that you could present the user with a modal form like the one on the Monster site you get when you click 'Sign In.' Once you click add user, make an AJAX call to your datasource to insert a new user and then on returning success, you could either initiate a page refresh or use AJAX to update the list.

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

For editing a user, once a user is selected, you could make an AJAX call with a user id to populate a modal form with the user details retrieved from your data source when the AJAX call returns success. Once you have finished editing the user, make an AJAX call to update your datasource and then again, initiate a page refresh or use AJAX to update the list.

而不是每个场景中的页面刷新或最终AJAX调用，您可以简单地使用JavaScript / jQuery来更新列表/列表详细信息，具体取决于是否已添加或编辑用户。

Instead of the page refresh or final AJAX call in each scenario, you could simply use JavaScript/jQuery to update the list/ list details, depending on whether a user has been added or edited, respectively.

这篇关于JQuery模态框和iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！