jQuery colorbox onclose更新父级

可以帮助你们。

所以我使用jQuery colorbox并通过点击链接激活它。 在颜色框中有一个带有一些复选框的表单，我想要做的是在单击提交时将所选复选框的所有值都放入父级（并随后关闭颜色框）。 我不希望父窗口刷新。 它应该自动使用内容填充“Colorbox中的复选框项目”

这是链接http://tdesigns.net84.net/colorbox/example1/

Parent code       body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;} a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} h2{font-size:13px; margin:15px 0 0 0;}      $(document).ready(function(){ $(".iframe").colorbox({iframe:true, width:"400px", height:"400px"}); });    
Outside Webpage (Iframe)
 
 Checkbox Items from Colorbox 
   popup code 
 Choose a country 

 UK
 USA
 Japan
 China
 Australia 

   

如果我能得到一些帮助，我将非常感激。

提前谢谢了

Answer 1

您可以通过在ajax.html文件中添加以下函数来执行此操作

首先在该文件中加载jQuery，然后添加此文档就绪函数

 $(document).ready(function(){ $('#form').submit(function(){ $('input:checkbox:checked').each(function(){ window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,"); }); parent.$.colorbox.close(); return false; }); }); 

这样做的是当用户点击overlay iframe上的submit button ，它会将所有选中的复选框添加到父窗口的文本div中，然后关闭颜色框窗口。

这是ajax.html文件的修改代码

  
 Choose a country 

 UK
 USA
 Japan
 China
 Australia 

  
  

还要在段落中添加一个id，其中将添加值，如下所示

 
 Checkbox Items from Colorbox:  

如果您有任何代码，则必须从localhost或相同的virtualhost运行代码，否则它将不允许从child iframe访问父代码。 只需将修改后的文件放在document root的文件夹中，然后通过浏览器访问它。 如果有效，请告诉我。

这是一个有效的演示http://joynag.net/demos/colorbox/