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

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

sponsors

使用方法

まず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より自由度が高くデザイン性に優れます。

サンプル

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net
Close