Question

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

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

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

然后你可以点击“编辑用户”，弹出表格字段中填写的用户信息的模态框，你可以编辑，提交，然后关闭并刷新。

我知道如果我将用户信息表格作为每个用户的隐藏div，可以做到这一点，但这不会很好地扩展，并且它是很多开销数据。

我发现了一些code about this on Google Code但是无法让它工作（可能是不同的简单模态版本

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

更新：

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

Answer 1

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

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

Answer 2

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

请注意，为了说明这一点，我有两个代码段。第一个标记为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" width="100%" height="100%" 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>

Answer 3

Fancybox也是另一种选择。与Thickbox类似地工作

编辑：

在玩了一些游戏后，插件本身不支持通过子iframe元素关闭Fancybox。我认为这可以通过一点努力实现（我开始 黑客攻击 一起here，尽管我强调这只是一个POC并且不起作用因为iframe中的按钮会从DOM中移除fancybox div包装器，因此当您再次单击google图像时不会显示。）但我想知道，如果iframe是正确的行，那么就会失败。

对于添加用户，我的想法是你可以向用户呈现类似于Monster site you get when you click 'Sign In.'上的模态表单。一旦你点击添加用户，对你的数据源进行AJAX调用以插入新用户然后在返回成功时，您可以启动页面刷新或使用AJAX更新列表。

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

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

Answer 4

parent.$.modal.close();适用于简单的模态插件。

Answer 5

我找到了解决方案，它使用的是nyroModal。它使用此代码通过iframe子项支持iframe和关闭模态。

parent.$.nyroModalRemove();

我将接受Russ Cam的回答给他更多的回复，因为他的回答让我想到了很多关于这将如何起作用并最终让我找到答案。

Answer 6

当我用firebug追踪时，这是对话脚本

<iframe> 
       scrolling="auto" 
       height="100%" 
       frameborder="0" 
       width="100%" 
       title="Dialog Title" 
       marginheight="0" 
       marginwidth="0" 
       id="modalIFrame"
       src="test.php" 
</iframe>

我需要将高度更改为95％，因为对话框滚动始终在屏幕T.T

中可见

Answer 7

您是否尝试过ThickBox？

Answer 8

我的FrameDialog将允许这个，它基本上扩展了Dialog ...如果你使用相同的域，你应该可以调用$ .FrameDialog.close（）但是，如果你重定向，你可以简单地重定向父。 window.parent.location会做。

http://plugins.jquery.com/project/jquery-framedialog

Answer 9

HI，任何人在使用Wordpress 3.0手动安装Fancy Box时无法关闭Fancy Box iFrame：

在iframe中使用此链接：

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

有效：）

Answer 10

这对我有用......

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />

Answer 11

尝试colorbox它也是一个不错的选择。

JQuery模态框和iframe

11 个答案: