0

我尝试设置一个颜色框（当您单击“注册我”按钮时），但它似乎没有启动。找不到任何 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>

现场演示

4

2 回答 2

0

尝试将 .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) 而不是 .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" 添加到您的链接中，它会像魅力一样工作=]

于 2012-10-09T18:30:00.537 回答
0

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

<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-09T18:31:19.810 回答