Fancybox 열기 문제 - JSFiddle에서 작동하지만 라이브 환경에서는 작동하지 않습니다.

Question

사용자가 탐색 메뉴에서 "CONTACT"를 클릭하면 멋진 상자 팝업을 열려고합니다. JSFiddle에서 작동하지만 http://jsfiddle.net/88X6D/1/을 참조하십시오. 그러나 라이브 환경에서는 작동하지 않습니다. http://goo.gl/lkfxeO을 참조하십시오. (메뉴에서 "연락처"를 클릭해도 아무런 변화가 없습니다)

처음에는 "부드럽게 스크롤 "스크립트와"문의 양식 "스크립트가 있지만 JSfiddle에서 작동하므로이 문제는 다른 곳에서 발생해야합니다. (또한 fancybox JS 파일과 jquery가 올바르게 호출 됨). 당신의 도움이

HTML

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

</li> 

스크립트

감사합니다 (이 파일에 있습니다 : 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() 전화에서 설정) 스크롤하기위한

1. 하나 (암시 적 $('.modalbox').fancybox()에 호출 추가) Fancybox에 대한
2. 하나.

스크롤링 클릭 처리기는 return false으로 끝납니다. 을 실행하는 모든 클릭 핸들러를 중지합니다. 따라서 스크롤링 클릭 핸들러는 실행되지만 Fancybox의 클릭 핸들러는 그렇지 않습니다. 스크롤링 클릭 핸들러는 브라우저에 지시하지 않습니다.

스크롤링 클릭 핸들러에는 ev.preventDefault() 호출이 있어야합니다. ev.preventDefault()은 브라우저에서 "기본"작업 (이 경우 링크를 따라 가려고 시도)을 중지하지만 은 나중에을 실행하는 클릭 핸들러를 막지 않습니다. 여기

이 Fancybox 가공 가야 업데이트 된 스크롤 핸들러 : 당신은`.fancybox()`와 [Fancybox 문서]에 설명 된대로합니다 (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'); 
     } 
    } 
});