jQuery

「Colorbox」を使ってダイアログを表示する方法

2024年2月18日 by single コメントはまだありません

「Colorbox」を使ってダイアログを表示する方法

今回は「Colorbox」を使って、モーダルウインドウを作成する方法になります。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>ColorBox Sample1</title>
   <link rel="stylesheet" href="/assets/colorbox-master/example1/colorbox.css" />
   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery.min.js"></script>
   <script src="/assets/colorbox-master/jquery.colorbox.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $(".inline").colorbox({inline:true, width:"30%", height:"30%",href:"#myDialog"});
         $(".html").colorbox({html:"<h3>タイトル（HTML）</h3><p>ダイアログ内容</p>",width:"30%", height:"30%"});
         $(".iframe1").colorbox({href:"colorbox_dialog.html",width:"30%", height:"30%"});
         $(".iframe2").colorbox({width:"30%", height:"30%"});
       });
   </script>
</head>
<body>
  <p>
     <a class='inline' href="javascript:void(0);">ダイアログ表示(inline)</a>
     <div style="display:none">
        <div id="myDialog" ><h3>タイトル（inline）</h3>ダイアログ内容</div>
     </div>
  </p>
  <p>
     <a class='html' href="javascript:void(0);">ダイアログ表示（HTML）</a>
  </p>
  <p>
     <a class='iframe1' href="javascript:void(0);">ダイアログ表示（iframe）その１</a>
  </p>
  <p>
     <a class='iframe2' href="colorbox_dialog.html">ダイアログ表示（iframe）その２</a>
  </p>
</body>
</html>

デモ

構文説明

ライブラリの読み込み

まず、基本ライブラリを読み込みます。３つです。

   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery.min.js"></script>

まず、jQueryです。これが前提です。次に

   <!--パスは適時変更ください -->
   <script src="/assets/colorbox-master/jquery.colorbox.js"></script>

jquery.colorbox.jsになります。

最後に、自分が使用したいColorboxのスタイルシートになります。今回のデモコードでは「exampmle1」のスタイルシートを使うことにします。

   <!-- 読み込むスタイルシート--><!-- パスは適時変更ください -->
   <link rel="stylesheet" href="/assets/colorbox-master/example1/colorbox.css" />

インストールされるサンプルのスタイルシートは「example1」～「example5」まで用意されているので、それを作ったサンプルをデモページには作ってあります。

HTMLマークアップ

インライン

まず、インラインのダイアログ領域を設定します。

<div style="display:none">
   <div id="myDialog" ><h3>タイトル（inline）</h3>ダイアログ内容</div>
</div>

ただ、ダイアログ領域がそのままだと表示されてしまうので、display:noneの領域内に定義しておきます。

次に呼び出しの領域を設定します。

<a class='inline' href="javascript:void(0);">ダイアログ表示(inline)</a>
<div style="display:none">
   <div id="myDialog" ><h3>タイトル（inline）</h3>ダイアログ内容</div>
</div>

ここではclass「inline」でアンカータグを用意します。

最後にclolorboxを「inline」アンカーを対象に初期化します。

<script type="text/javascript">
    $(document).ready(function(){
      $(".inline").colorbox({inline:true, width:"30%", height:"30%",href:"#myDialog"});
    });
</script>

初期化パラメータの「href」にダイアログボックス領域のIDを指定することで、アンカーとダイアログの紐づけができます。

HTML

ダイアログ領域を定義せず、そのまま指定文字列を表示させたい場合には、colorboxの初期化オプション「html」を『true』に設定しダイアログボックス内容を定義してください。

まず、ダイアログ表示のためのアンカーを準備します。

<a class='html' href="javascript:void(0);">ダイアログ表示（HTML）</a>

ここではclass「html」とします。

次に、このclass「html」のエレメントに対してcolorboxを初期化します。初期化オプション「html」に、表示したい文字列を定義してください。HTMLタグも利用できます。

<script type="text/javascript">
    $(document).ready(function(){
      $(".html").colorbox({html:"<h3>タイトル（HTML）</h3><p>ダイアログ内容</p>",width:"30%", height:"30%"});
    });
</script>

インラインフレーム

ダイアログの表示内容を別ページにする場合には、初期化オプション「href」に外部ページのリソース名を定義してください。

まず、ダイアログ表示のためのアンカーを準備します。

<a class='iframe1' href="javascript:void(0);">ダイアログ表示（iframe）その１</a>

または、アンカーに表示するページを「href」に定義してしまいます。

<a class='iframe2' href="colorbox_dialog.html">ダイアログ表示（iframe）その２</a>

次に、そのアンカーに対して、colorboxを初期化します。

<script type="text/javascript">
    $(document).ready(function(){
      $(".iframe1").colorbox({href:"colorbox_dialog.html",width:"30%", height:"30%"});
      $(".iframe2").colorbox({width:"30%", height:"30%"});
    });
</script>

アンカーで「href」を設定した場合には、colorbox指定時には、「href」を設定する必要はありません。

ご参考

関連ページ