ColorBox未加載 - 所有JS正在通過正確

Question

我試圖設置一個colorbox（當你點擊'註冊我'按鈕），但它似乎並沒有啓動。無法找到任何JavaScript錯誤或控制檯錯誤，只是似乎沒有觸發。

我已經鏈接了樣式表，JS文件幷包含了頭文件，它們都打開並正確調用到頁面中。

<link rel="stylesheet" href="css/colorbox.css" /> 
<script src="js/jquery.colorbox.js"></script> 
    <script> 
     $(document).ready(function(){ 
     //Examples of how to assign the ColorBox event to elements 
     $(".inline").colorbox({inline:true, width:"50%"}); 
     $(".callbacks").colorbox({ 
      onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
      onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
      onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
      onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
      onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
     }); 

     //Example of preserving a JavaScript event for inline calls. 
     $("#click").click(function(){ 
      $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
      return false; 
     }); 
     }); 
    </script> 

我創建了內聯內容div（隱藏）並正確鏈接了按鈕。

<span class="btn"><a href="#inline_content">Sign Me Up!</a></span> 

這裏是內嵌的內容：

<div style='display:none'> 
    <div id='inline_content' style='padding:10px; background:#fff;'> 
    <p><strong>This content comes from a hidden element on this page.</strong></p> 
    <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p> 
    </div> 
</div> 

Live site demo

Answer 1

在你的代碼的所有選擇都斷了。試試這個代碼：

<span class="btn"><a class="callbacks" href="#inline_content">Sign Me Up!</a></span> 

和jQuery：

$(document).ready(function(){ 
    $(".callbacks").colorbox({ 
     inline:true, 
     onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
     onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
     onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
     onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
     onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
    }); 
}); 

演示：http://jsfiddle.net/a4urV/

Answer 2

嘗試把.inline類，你要打開的顏色框的鏈接。

<span class="btn"><a href="#inline_content" class="inline">Sign Me Up!</a></span> 

，將利用這個顏色框實例：

$(document).ready(function(){ 
    $(".inline").colorbox({inline:true, width:"50%"}); 
}); 

你不需要有所有這些回調的加載顏色框，所以我建議使用這種顏色框實例化（.inline），而不是。回叫一個。

• 克里斯

編輯：

由於這一刻你的jQuery是無效的，導致它打破：

<script> 
     $(document).ready(function(){ 
    $(".callbacks").colorbox({ 
     inline:true, 
     onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
     onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
     onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
     onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
     onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
    }); 
}); <-- Extra closing tag 
     }); <-- Extra closing tag 

     //Example of preserving a JavaScript event for inline calls. 
     $("#click").click(function(){ 
      $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
      return false; 
     }); 
     }); 
    </script> 

我建議爲簡單起見和要修復您的錯誤，請使用以下代碼替換整個代碼：

<script> 
    $(document).ready(function(){ 
     $(".inline").colorbox({inline:true, width:"50%"}); 
    }); 
</script> 

，然後添加類=「內聯」到您的鏈接，它會像一個魅力=]