Fancybox 2和带有响应表单的同一页面问题

Question

我希望使用Fancybox 2和jQuery打开一个通过Ajax请求的页面，名为form_page.php，并在同一Fancybox窗口中获取响应...

我使用以下js代码：

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

HTML是：

<a class="various fancybox.ajax" href="/form_page.php">Ajax</a>

我只需要POST以同样的方式在Fancybox内的/form_page.php中加载即可。

- neorf

Answer 1

在Fancybox中放置表单时，我使用iframe变体。这使我可以进行常规的发布等操作。当表单成功处理时，我使用JavaScript关闭Fancybox“弹出窗口”并刷新调用父文档。

Fancybox“弹出窗口”表单：

$('a.popup').fancybox({
    'type':'iframe',
    'hideOnContentClick':false,
    'overlayShow':true,
    'speedIn':100,
    'speedOut':50,
    'width':600,
    'height':500,
    'padding':0,
    'margin':0,
    'onClosed':function(){window.location.reload();},
    'onComplete':function(){$('input.focus:last').focus();}
});

关闭“弹出窗口”：

if (window.self !== window.top) {
    // is nested
    parent.$.fancybox.close();
}

- Sonny

---

你有使用fancybox的表单的示例代码吗？我一直在开发fancybox弹出式表单，但是让它们验证造成了一些麻烦。fancybox 1 FAQ页面有一个示例，但我正在使用适用于整个网站弹窗的fancybox 2... - nicorellius

我正在使用 Fancybox 1.3.4。Fancybox 2 有不同的许可证，而且我还没有得到批准购买它的许可。 - Sonny

Answer 2

我认为你可以尝试声明你的fancybox并使用afterShow选项来绑定你的表单：

    $('.various').fancybox({
        closeClick: false,
        afterShow:  function() {
            $("form#user_new").bind('ajax:success', function(evt, data, status, xhr) {
                // When your form will be submitted and successfull,
                // You can try to open a fancybox here with your result here
            }
        }
    });

这并不是一个可以复制/粘贴的代码，因为我没有给出你想要的确切内容，原因很简单，我也不知道；但如果它能帮到你，那就好了。

- Bachet