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中。

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();
}

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
            }
        }
    });

这不是真正的复制/粘贴代码，因为我没有准确地给出你想要的东西，原因很简单，我不知道;）但是如果它可以提供帮助。

fancybox 2和同一页面中的响应形式

2 个答案: