2009-02-04 61 views
17

我一直在使用Simple Modal,我觉得它不符合我目前需要的。JQuery Modal Boxes和Iframe

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

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

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

我知道这可以做到,如果我有用户信息表单作为每个用户的隐藏div,但这不会很好地扩展,它是大量的开销数据。

我发现了一些code about this on Google Code但就是无法得到它的工作(可能是不同的简单模式版本

我愿意改变到另一个模式对话框的工具也

更新:

待办事项无论是ThickBox的或支持的fancybox正在从一个子iframe元素关闭?

+1

Thickbox已死,请使用别的东西。 (请参阅他们的页面以获得建议) – dland 2011-04-12 09:47:45

回答

8

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

编辑:

看来一些玩弄该插件本身不支持通过一个子iframe元素关闭的fancybox之后。我认为这是肯定可以做到的,只需一点点努力(我开始黑客在一起here东西,虽然我强调这只是一个POC,并且不起作用,因为iframe中的按钮从DOM中移除fancybox div包装器因此当你再次点击谷歌图片时不会显示)。我想知道,如果iframe是正确的线条下降。

对于添加用户,我的想法是,您可以向用户展示一个模式表单,如Monster site you get when you click 'Sign In.'上的模式表单一旦您点击添加用户,对您的数据源进行AJAX调用以插入新用户,然后返回成功,您可以启动页面刷新或使用AJAX更新列表。

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

而是在每个场景中的页面刷新或最后AJAX调用的,你可以简单地使用JavaScript/jQuery的更新列表/列表的详细信息,这取决于用户是否已经添加或编辑,分别。

+0

我真的很感谢你在这方面的努力,你的想法使用AJAX可能会让我很想我想要什么。我将在明天工作时检查它,当我发现某些事情时,我会更新我的问题。再次感谢。 – 2009-02-05 00:43:56

0

你试过ThickBox

+0

ThickBox已死亡。使用别的东西。 – dland 2011-04-12 09:46:38

1

我找到了解决方案,它使用nyroModal。它使用此代码通过其iframe子代支持iframe并关闭模式。

parent.$.nyroModalRemove(); 

我将接受拉斯凸轮的回答给他更多的声望,因为他的回答让我思考了很多关于这是怎么回事工作,最终让我找到了答案。

+0

谢谢:)有趣的是,我开始通过调用fancybox关闭函数来关闭Fancybox,并通过iframe子元素来实现这一功能。我很高兴你找到了解决方案。你有nyroModal的链接吗? – 2009-02-05 16:02:05

+0

我当然可以。 http://nyromodal.nyrodev.com/ – 2009-02-05 16:31:36

16

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

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

parent.$.modal.close();作品进行简单的模态插件。

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> 

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> 
0

我FrameDialog将允许这一点,它基本上扩展的对话框...如果你正在使用同样的域名,你应该可以调用$ .FrameDialog.close(),如果你重定向,你可以简单地重定向父级。 window.parent.location会做。

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

0

HI,谁是有麻烦使用手动关闭花式箱的iFrame 任何人在WordPress的3.0花式箱的安装:

使用此链接在你的iframe:

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

It works :)

1

这是对话框的脚本,当我跟踪萤火虫

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

我需要改变高度到95%,因为该对话框滚动屏幕TT

0

这对我的作品总是可见...

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