skuare.net

JavaScriptでお手軽にLightBox風を実現する

Ajaxを知らしめた「LightBox」ですが、わりと導入が面倒だったり、デザインが地味だったりします。
そこで、今回は簡単にLightBox風味を実現するjavascriptを紹介します。
via : A Cool CSS Effect - Dashboard

使用方法
まずCSSを以下のようにします。
.dashboard {
background:#000000;
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}
そして表示したい画像やコンテンツを以下のように書きます。
<div id="id名" class="dashboard">
コンテンツ
<script type="text/javascript">
document.getElementById('id名').style.display='none';
</script>
</div>
最後に隠しているコンテンツを表示させるため以下を記述します。
<a href="" onclick="document.getElementById('id名').style.display='';return false;">Click</a>
表示するコンテンツを自由にデザインすることができるので、LightBoxより自由度が高くデザイン性に優れます。
JavaScriptでお手軽にLightBox風を実現するサンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」
次の記事：画像をフィルム風に加工するjavascript「filmed.js」

関連記事

• [jQuery]SimpleModal
• 画像ギャラリーの定番javascript「LightBox」
• jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」
• 動画も対象のLightbox系javascript「Mediabox」
• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」