Fancybox開放問題 - 適用於JSFiddle，但不適用於實時環境

Question

我試圖在用戶點擊導航菜單中的「聯繫人」時打開一個精美的框彈出窗口。它適用於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

的問題是在點擊處理程序。您的「聯繫」鏈接結束了兩個處理程序：

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'); 
     } 
    } 
});