Question

当用户点击＆＃34; CONTACT＆＃34;我试图获得一个精美的盒子弹出窗口。在导航菜单中。它适用于JSFiddle，请参阅http://jsfiddle.net/88X6D/1/但由于某些原因它不能在实时环境中工作，请参阅http://goo.gl/lkfxeO（单击＆＃34时没有任何反应;联系＆＃34;在菜单中）

我最初认为＆＃34;平滑滚动＆＃34;之间存在冲突。脚本和＆＃34;联系表格＆＃34;脚本，但因为它适用于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

问题在于您的点击处理程序。您的“联系”链接最终会有两个处理程序：

一个用于滚动（在$('a[href*=#]:not([href=#])').click()通话中设置）
一个用于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');
        }
    }
});

Fancybox开放问题 - 适用于JSFiddle但不适用于实时环境

1 个答案: