先日、Bootstrapのmodal表示機能をご紹介しましたが、colorboxも良く使われるモーダル表示のライブラリです。
jQueryがあれば動くので、結構、多くの人が使っていると思います。
colorboxの良いところ
モーダル表示させるときの振る舞いや表示位置など、動きの細かい制御が可能。
モーダルオープン時、コンテンツロード時、クローズ時などのイベントをハンドリンクできるため、それらを契機に、さまざまな振る舞いをJavaScriptで記述することができる。
一方、デザインは、カスタマイズしにくい。
(デザインについては、Bootstrapのmodalのほうがカスタマイズしやすい印象です。)
多くの人が使っているので、ネット上に情報がたくさんあります。困ったときに調査し、ソリューションを見つけやすいです。
Bootstrapのmodalの組み込み方
jQueryを使いって実現されているので、jQueryをダウンロードしておきます。
「https://jquery.com/」
このサンプルでは、Ver3.3.1を利用しました。
また、colorboxもダウンロードしておきます。
「http://www.jacklmoore.com/colorbox/」
ダウンロードしたcolorboxのファイルを解凍すると、example1～example5のサンプルも入っています。この中には、異なるデザインのcssとイメージがありますので、利用してみて、自分のイメージ近いサンプルのcssを使うとよいでしょう。
デザインをカスタマイズする場合も、これらを元に変更するといいです。
さて、用意はこの「jQuery 3」と「colorbpx」だけなので、準備できたら、以下のソースを記載します。
親画面のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<title>colorbox modal sample parent page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script src="./jquery-3.3.1.min.js"></script>
<script src="./colorbox-master/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="./colorbox-master/example4/colorbox.css" />
<h1>colorbox modal sample parent page</h1>
<script type="text/javascript">
function call_cbox() {
jQuery.colorbox({href:'./c1.html'
,scrolling:'auto'
//,iframe:true
,height:'80%'
,width:'80%'
,title: function(){
var custom_btn = '<button type="button" id="custom_btn" onclick="cbox_button_called(); return false;">CustomBtn</button>';
return custom_btn;
}
});
}
function cbox_button_called(){
console.log('cbox_button_called');
$('#cboxClose').click();
$('#cboxOverlay').remove();
$('#colorbox').remove();
}
$(document).bind('cbox_complete', function(){
console.log('cbox_complete');
});
</script>
<a href="#" onclick="call_cbox(); return false;">call colorbox</a>
</body>
</html>子画面のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<title>colorbox modal sample child page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>colorbox modal sample child page</h1>
</body>
</html>ソースの内容とつまづきやすいポイントを解説
基本的には、「jQuery.colorbox」を呼べばいいのですが、いろいろと複雑な動きをさせようと思うと、考慮点が多いので、そういうときでも汎用的に使えるように、解説を追記します。
「jQuery.colorbox」には以下のようにオプションが渡せます。
オプションの詳細は上記のダウンロードページに詳しくのっていますが、「iframe:true」をtrueにしたりfalseにしたりすることで、iframeとしてモーダル画面のコンテンツをロードできます。
また、「title」というオプションは、モーダル画面に表示するタイトルをセットできますが、これにhtmlでボタンを渡すことで、モーダル画面にカスタムのボタンを複数追加することもできます。
jQuery.colorbox({href:'./c1.html'
,scrolling:'auto'
,iframe:true
,height:'80%'
,width:'80%'
,title: function(){
var custom_btn = '<button type="button" id="custom_btn" onclick="cbox_button_called(); return false;">CustomBtn</button>';
return custom_btn;
}
});最初に述べましたが、モーダルの開閉時やコンテンツロード時などにイベントをフックできますので、そのタイミングでさまざまな処理を行なうことが出来ます。
下記は、コンテンツがロードされた直後に、ログを吐くサンプルです。
$(document).bind('cbox_complete', function(){
console.log('cbox_complete');
});colorboxは、初期化の際に、モーダルのコンテンツを読み込むdiv領域を挿入して、それを擬似的にモーダルっぽく見せています。（多くのモーダルのライブラリもそうですが）
なので、複数回開いたり閉じたりすると、競合を起こして、動きがおかしくなって開かなくなったり、ブラウザのデバッグコンソールでjavascriptのエラーが表示されたりします。
そんな場合は、「閉じる」際に、挿入されたdiv領域(#cboxOverlay)などをきれいに除去してあげると良いです。下記みたいに。
function cbox_button_called(){
console.log('cbox_button_called');
$('#cboxClose').click();
$('#cboxOverlay').remove();
$('#colorbox').remove();
}