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

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

sponsors

「JavaScriptでお手軽にLightBox風を実現する」をシェアする

記事作成:
記事URL:

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