みなさん、モーダルしてますか？

Webサイトでモーダルウィンドウを実装する機会は多いと思うのですが、プラグインも豊富なので何を使おうか悩んだことがある人も多いはず。

僕は、定番ですがColorboxというjQueryプラグインを使うことが多いというか、ほぼこれ一択です。
Coloroxの何が良いかというと多機能でカスタマイズしやすい！これに尽きます。

標準でyoutubeやvimeoなどの動画サイト、ajaxを使って取得したコンテンツの表示などに対応しているのはもちろん、オプションが豊富でいろいろな設定が可能です。

コールバックやパブリックメソッドと呼ばれる、別のJavaScriptからColorboxの操作を行うための仕組みなどが用意されているので、非常にカスタマイズがしやすいです。

文章で説明するだけではわかりにくいと思うので、
実際に実務であった例をデモを交えて、機能やカスタマイズ方法を紹介していきます。

今回の案件では、主に次のような仕様や課題がありました

• デザインをサイトに合うように変えたい。
• 同じドキュメント内のHTMLを呼び出したい。なおかつグループ化したい。
• 別のJavaScriptからColorBoxの操作を行いたい。

デザインをサイトに合うように変えたい

まずは一番要望が多そうなところですね。
実際、サイトの雰囲気に合うようにデザインを変えてくれという要望は多いです。
今回の案件では、左右の矢印と閉じるボタンのデザインを変更しました。

まず、Colorboxのナビゲーションは、「controls.png」という画像を使って作られているので、
その画像を変更してあげた上で、それぞれのCSSをいじって位置の調整などを行っていけばOKです。

デフォルトでは以下のようになっているので、ここをいじってあげれば良い感じに変更できます。

 
/* 前へボタン　*/
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}

/* 次へボタン */
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}

/*閉じるボタン */
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

シンプルなデザインに変更したデモ

同じドキュメント内のHTMLを呼び出してグループ化する。

画像をグループ化してスライドショーとして見せる機会は多いですが、
今回は同じドキュメント内のHTML(インラインHTML)をグループ化して、
左右のボタンで移動できるようにしました。

グループ化出来るのは画像だけだと勝手に思いこんでいましたが、
オプションのrelを設定してあげれば、画像だろうがインラインのHTMLだろうが、
colorboxで呼び出せるコンテンツは全てグループ化出来るようです。

 
$(".inline").colorbox({
     inline:true,
     rel:'group'
});

こんな感じで書けばOKです。
この場合は、inlineというクラスから呼び出されるcolorboxのコンテンツがグループ化されます。
relの「group」という名前は任意でOKで、名前を「group1」「group2」のように変えていけば、
複数のグループを作ることが出来ます。

インラインHTMLグループ化のデモ

別のJavaScriptからColorBoxの操作を行う

インラインで呼び出したHTMLの中にボタンがあってそれを押すと、
ページ内リンクするという少し変わった仕様でした。

HTML内のボタンはcolorboxがもともと持っているナビゲーションではないので、
このボタンが押された時に移動と同時にカラーボックスが閉じるようにするという風に、
別のJavaScriptからカラーボックスの操作を行う必要がありました。

前述したパブリックメソッドを使えば簡単にできます。

 
$('.close').on('click', function() {
    $.colorbox.close();
});

これだけで、「close」というクラスのついた要素をクリックすれば、colorboxを閉じてくれます。

ただここで一つ問題がありました。
アンカーリンクした後に、カラーボックスを実行した位置にフォーカスが戻ってしまうという現象が起きました。
これもオプションで設定可能でした。

 
$(".inline").colorbox({
     returnFocus:false,
});

「returnFocus」というオプションがデフォルトではtrueになってるので、falseに変えてあげればOKです。

デモを見る

今回は一部の機能やカスタマイズ方法だけ紹介させていただきましたが、使い方次第で色々と応用できそうです！
詳しいオプションなどは、オフィシャルサイトでご確認ください。

【参考サイト】

Colorbox オフィシャルサイト