JQuery模态框和iframe

Question

JQuery模态框和iframe

Óla*_*age 19 javascript iframe jquery refresh modal-dialog

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

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

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

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

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

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

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

更新:

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

Answer 1

Ble*_*ger 16

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Jos*_*lfe 13

下面是一个基本的对话框交互,将内容加载到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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Rus*_*Cam 9

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

编辑:

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

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

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

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

归档时间：	16 年，7 月前
查看次数：	64915 次
最近记录：	12 年，6 月前