Fancybox打开问题-在JSFiddle上工作，但不能在现场环境中工作

Question

当用户点击导航菜单中的"CONTACT"时，我试图得到一个花哨的弹出框打开。它可以在JSFiddle上工作，参见http://jsfiddle.net/88X6D/1/，但由于某种原因，它不能在实时环境中工作，参见http://goo.gl/lkfxeO(点击菜单中的"contact"时没有任何反应)

我最初认为"平滑滚动"脚本和"联系表单"脚本之间存在冲突，但由于它在JSfiddle上工作，问题必须在其他地方。(也可以正确调用fancybox JS文件和jquery)。

谢谢你的帮助

HTML

<li> <a href="#inline" class="modalbox highlightit">Contact</a>
</li>

SCRIPTS(位于此文件:js/SCRIPTS .js)

//==============
//! Smooth scrolling
//==============
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 100
            }, 'normal');
            return false;
        }
    }
});
})
window.onscroll = scrollFunction;
function scrollFunction() {
    var doc = document.documentElement, body = document.body;
    var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    if (top > 200) {
        $('.back-to-top').fadeIn();
    }
    else {
        $('.back-to-top').fadeOut();
    }
}

//==============
//! Contact form
//==============

function validateEmail(email) { 
        var reg = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
    }
    $(document).ready(function() {
        $(".modalbox").fancybox();
        $("#contact").submit(function() { return false; });

        $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var msgval    = $("#msg").val();
            var msglen    = msgval.length;
            var mailvalid = validateEmail(emailval);
            var nameval = $("#name").val();
            if(mailvalid == false) {
                $("#email").addClass("error");
            }
            else if(mailvalid == true){
                $("#email").removeClass("error");
            }
            if(msglen < 4) {
                $("#msg").addClass("error");
            }
            else if(msglen >= 4){
                $("#msg").removeClass("error");
            }
            if(nameval < 2) {
            //name must be at least 2 characters
                    $("#name").addClass("error");
            }
            else if(nameval >= 2){
                    $("#name").removeClass("error");
            }
            if(mailvalid == true && msglen >= 4) {
                // if both validate we attempt to send the e-mail
                // first we hide the submit btn so the user doesnt click twice
                $("#send").replaceWith("<em>sending...</em>");
                $.ajax({
                    type: 'POST',
                    url: '../sendmessage.php',
                    data: $("#contact").serialize(),
                    success: function(data) {
                        if(data == "true") {
                            $("#contact").fadeOut("fast", function(){
                                $(this).before("<p><strong>Success! Your message has been sent, thank you.</strong></p>");
                                setTimeout("$.fancybox.close()", 1000);
                            });
                        }
                    }
                });
            }
        });
    });

Answer 1

问题出在你的点击处理程序上。你的'contact'链接以两个处理程序结束:

1. 一个滚动(设置在您的$('a[href*=#]:not([href=#])').click()呼叫)
2. 一个用于Fancybox(通过调用$('.modalbox').fancybox()隐式添加)。

滚动点击处理程序以return false结束。这将停止所有以后运行的单击处理程序。因此，你的滚动点击处理程序运行，但Fancybox的点击处理程序不运行——滚动点击处理程序告诉浏览器不要这样做。

滚动点击处理程序应该有一个ev.preventDefault()调用。ev.preventDefault()阻止浏览器执行"默认"操作(在本例中，试图跟随链接)，但是并不阻止以后的单击处理程序运行。

这是一个更新后的滚动处理程序，可以让你的Fancybox工作:

$('a[href*=#]:not([href=#])').click(function (ev) { // Added 'ev' parameter
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            ev.preventDefault(); // We're animating this, so don't let the browser try to navigate to this URL
            $('html,body').animate({
                scrollTop: target.offset().top - 100
            }, 'normal');
        }
    }
});