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.

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

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.

我发现了一些 在谷歌代码上对此进行代码，但无法让它工作(可能是不同的简单模式版本

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.

更新:

Thickbox 或 Fancybox 是否支持从子 IFrame 元素关闭?

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.我认为这当然可以通过一点努力来实现(我开始hacking此处，尽管我强调这只是一个 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.

对于添加用户，我的想法是您可以向用户显示一个模态表单，例如 单击登录"时获得的怪物站点. 单击添加用户后，对数据源进行 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.

对于编辑用户，一旦选择了用户，您就可以使用用户 ID 进行 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.

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

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屋！