javascript - Fancybox打不开

Question

由于某种原因，单击超链接时我的精美框没有显示(页面仅向上移动了几个像素)，请参阅 http://goo.gl/n6df2y (无法在 jsfiddle 中重现)。知道问题是什么吗？非常感谢，

HTML

  <div class="inscription-newsletter"><p><b>Restez informés!</b> Inscrivez-vous à la <a class="fancybox" href="#newsletterpopup">newsletter</a></p></div>

<div id="newsletterpopup">
      <h1>Inscription à la Newsletter</h1>
      <p>Inscrivez-vous à la newsletter pour être tenu au courant des nouveautés du site et de l'agenda des conférences</p>
      <div class="message"></div>
      <form role="form" class="form-newsletter" method="post" id="subscribe">
        <input type="email" class="newsletter-field" id="newsletteremail" name="email" placeholder="e-mail" value="">
        <button type="submit" class="newsletter-button" id="newslettersubmit">OK</button>
      </form>
      <div class="non-merci"><b>X</b> FERMER</div>
      <div class="max-emails">Pas de spam ici :-) Maximum 1 e-mail envoyé par mois!</div>
    </div>

JS

//==============
//! Fancybox and cookie
//==============

function openFancybox() {
    setTimeout(function () {
        $(".fancybox").trigger("click");
    }, 7000);
};
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 0.04
    });
    $(".fancybox").fancybox({
        closeClick: false,
        showCloseButton: true,
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(58, 42, 45, 0.3)'
                }
            }
        },
        afterShow: function () {
            // enables a way to close fancybox
            $(".non-merci").on("click", function () {
                $.fancybox.close()
            });
        }
    }); // fancybox
}); // ready


//==============
//! 
//==============


$(document).ready(function() {
    $('#subscribe').submit(function() {
        if (!valid_email_address($("#newsletteremail").val()))
        {
            $(".message").html("<span style='color:red; margin-bottom: 3px;'>Email non valide</span>");
        }
        else
        {

            $(".message").html("<span style='color:green;'>En cours d'ajout...</span>");
            $.ajax({
                url: 'subscribe.php', 
                data: $('#subscribe').serialize(),
                type: 'POST',
                success: function(msg) {
                    if(msg=="success")
                    {
                        $("#newsletteremail").val("");
                        $(".message").html('<span style="color:green;">E-mail ajouté avec succès. Merci!</span>');
                        setTimeout("$.fancybox.close()", 2000);

                    }
                    else
                    {
                      $(".message").html('E-mail non valide');  
                    }
                }
            });
        }

        return false;
    });
});
function valid_email_address(email)
{
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
    return pattern.test(email);
}

Answer 1

您需要检查您的代码，因为弹出窗口是第一次显示。在其他访问中 'visited == 'yes' 'return false' 将停止执行该函数。

$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 0.04
    });
    $(".fancybox").fancybox({...

尝试删除返回:

$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited != 'yes'){
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 0.04
    });
    $(".fancybox").fancybox({
        // API options
    });
});