Question

我试图设置一个颜色框（当你点击'注册我'按钮）但它似乎没有启动。找不到任何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

尝试将.inline类放在要打开颜色框的链接上。

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

这将使用此colorbox实例化：

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

你不需要让所有这些回调加载colorbox，所以我建议使用这个colorbox实例化（.inline）而不是.callbacks。

克里斯

修改

到目前为止，你的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>

然后将class =“inline”添加到您的链接中，它将像charm =]
一样工作

Answer 2

代码中的所有选择器都已损坏。试试这段代码：

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

ColorBox没有加载 - 所有JS都正确地通过

2 个答案: