ColorBox未加载 - 所有JS正在通过正确

我试图设置一个colorbox（当你点击'注册我'按钮），但它似乎并没有启动。无法找到任何JavaScript错误或控制台错误，只是似乎没有触发。ColorBox未加载 - 所有JS正在通过正确

我已经链接了样式表，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

来源

2012-10-09 Francesca

在你的代码的所有选择都断了。试试这个代码：

<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/

来源

2012-10-09 18:31:19 webdeveloper

我已经改变了我的网站，你给我的代码，但它仍然没有工作。代码是从colorbox例子中获得的，所以我认为这是正确的，并且沿线必须有一个断开的链接？您可以在这里再次查看更新的版本：http：//www.rubytuesdaycreative.co.uk/testsite/ – Francesca

Francesca，它看起来像你有无效的jQuery。有太多的右括号。请在上面查看，因为我更新了我的答案，以使您更轻松。删除之间的所有代码，并将我为您提供的代码段放在那里，并将class =“inline”添加到链接:) –

完美谢谢！ – Francesca

尝试把.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>

，然后添加类=“内联”到您的链接，它会像一个魅力=]

来源

2012-10-09 18:30:00

ColorBox未加载 - 所有JS正在通过正确

回答

相关问题