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%"});
});

カラーボックスをロードするためにこれらのコールバックをすべて持つ必要はないので、.callbacks ではなく、このカラーボックスのインスタンス化 (.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>

次に 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 に答える