ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQueryプラグインColorBoxでオリジナルの閉じるボタン(Closeボタン)を配置

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>
投稿日
2012年11月12日
カテゴリー
JavaScript
  1. 【HTML/CSS】諸々リンクなど | AS blind side さん (2015年4月2日 20:36)

    […] | きほんのき ・jQueryでセレクトボックスのoption要素を追加/削除する方法 ・jQueryプラグイン「ColorBox」でオリジナルの閉じるボタン(Closeボタン)を… ・JavaScript – リンクタグを使用した閉じるボタン記述方法「colorbox.js」 […]

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント
事業別サイト