如何在Ajax提交后关闭fancybox？

我正在使用Jquery表单插件。

弹出窗口显示图像上传表格。 图像上传成功。 我想在成功上传图片后关闭弹出窗口。 下面的javascript是用弹出内容编写的。

$(this).ajaxSubmit({ success: function(dd) { parent.$.fancybox.close(); } }); 

但它没有用。 Jquery库，包含在弹出内容和父页面中的fancybox库。

另外，我想用“dd（ajax返回值）”内容重新加载fancybox。 它将具有Jcropfunction。

现在，一旦用于上传图像的ajaxSubmit，Jcrop就无法正常工作。 否则它正在工作

编辑我重命名了page1 page2和page3以更好地理解index.html

        $(document).ready(function() { $(".various").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '100%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); });    Upload   

https://stackoverflow.com/questions/9313918/how-to-close-fancybox-after-ajax-submit/upload.php的

 
 
 
 Upload Image :   
 
  
 
 
   $(document).ready(function() { $("#form").submit(function() { $(this).ajaxSubmit({ beforeSubmit: function(before) { }, success: function(dd) { $('.result').html(dd); } }); return false; }); });  

test.php包含（我只是用静态图像测试。没有在这里写上传脚本。）

      $(function(){ $('#cropbox').Jcrop({ }); });   

Jcrop没有使用这种方法。 如果我跳过https://stackoverflow.com/questions/9313918/how-to-close-fancybox-after-ajax-submit/upload.php步骤，jcrop在fancybox中工作正常。 所以我需要在上传后删除并创建一个新的fancybox！

编辑结束

Answer 1

试试这个

 var fancyboxProxy = $.fancybox; $(this).ajaxSubmit({ success: function(dd) { fancyboxProxy.close(); } }); 

编辑：

我修复了它将所有js放在index.php中并使用jquery live来设置事件监听器

 $(document).ready(function () { $(".various").fancybox({ maxWidth: 800, maxHeight: 600, fitToView: false, width: '70%', height: '100%', autoSize: false, closeClick: false, openEffect: 'none', closeEffect: 'none' }); $("#form").live('submit', function () { $(this).ajaxSubmit({ beforeSubmit: function (before) { }, success: function (dd) { $.fancybox.close(); } }); return false; }); }); 

演示

资源

干杯

Answer 2

谢谢你的代码。

只需在test.php文件中插入以下代码即可。 在根目录中创建上传文件夹。

 '; } else { print "Upload failed!"; } ?> 

你会得到完美的结果。