ブログ

ColorBoxには、はじめから閉じるボタンが用意されているんだけど、それを使うとコンテンツが表示される時のアニメーションから閉じるボタンが表示されてしまって、かっこ悪いんですよね。

そこで、自身で用意した閉じるボタンをクリックするとColorBoxのウィンドウが閉じるように設定してみました。

といっても、本家サイトにしっかりと記述されているので、それを使っただけですが。

HTML

<a class="hoge_btn" href="#hoge_area">ダミー</a>
<div style="display: none;">
<div id="hoge_area">
<a id="btn_close" href="#">閉じる</a>
</div>
</div>

Javascript

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$(".hoge_btn").colorbox({inline:true"});
});
// HTMLで指定したIDの要素をクリックするとColorBoxウィンドウが閉じます。
$("#btn_close").click(function(){
parent.$.fn.colorbox.close(); return false;
});
// ]]></script>