Fancybox - 重新加载页面或加载新页面

Question

我有一个登录链接，它打开一个Fancybox 并询问用户他们的用户名/密码。

我将用户输入发送到 PHP 脚本进行验证，该脚本在出错时返回错误消息，或在成功时重定向到主页。

• 收到错误消息时，我希望将错误消息重新加载到同一个父 Fancybox 中。

• 成功后，我希望 Fancybox 关闭并在主窗口中加载主页。

另一个问题是我的 css 没有在 #fancyboxLogin 上加载，但在 $fancybox 上加载正常。

HTML：

<a class="fancyboxLogin fancybox.iframe" href="/login">Log In</a>

JavaScript：

$(document).ready(function () {
    $(".fancybox").fancybox();
});

$(document).ready(function () {
    $(".fancyboxLogin").fancybox({
        type: "iframe",
        afterClose: function () {
            parent.location.reload(true);
        }
    });
});

Answer 1

在html页面中替换

<a class="fancyboxLogin fancybox.iframe" href="/login">Log In</a>

用这条线

<a class="fancyboxLogin fancybox.ajax" href="/login">Log In</a>

对于错误消息，您可以简单地使用带有 ajax 的 javascript 函数进行验证，并在 div 标签中显示消息。

如果验证成功，则只需使用 javascript submit() 函数提交表单，该函数提交登录表单并刷新页面。

对于 javascript fancybox 脚本，简单地说：

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

希望对你有帮助