グレーアウト表示ライブラリ:glayer.js:phpspot開発日誌

前の記事 «：MySQL5のストアドプロシージャライブラリ
次の記事 »：デバッグ用CSSのスニペット

グレーアウト表示ライブラリ:glayer.js

2006年08月09日

スポンサードリンク

Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(grey＋layerで、glayer.js)

グレーアウト表示ライブラリ:glayer.js。
LightBoxのように、画面全体を簡単にグレーアウトすることが出来ます。

使い方は、必要なJavaScriptとCSSを読み込ませて、divを定義した後、onclickイベントハンドラなどに、

Layer.show( divのid要素 )
Layer.hide( divのid要素 )

を仕込むだけで簡単に使えて便利です。

このライブラリを使って、ポップアップメッセージをウィンドウ内で表示するサンプルを作ってみました。

<html>


<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./effects.js"></script>
<script type="text/javascript" src="./glayer.js"></script>

<link rel="stylesheet" href="./glayer.css" type="text/css" />

<body>

<div id="glayer" class="glayer" style="display: none;" onclick="Layer.hide('glayer')">


<div style="text-align:center;width:100%;position:absolute;top:80px;">
<div style="background-color:white;width:300px;top:80px;margin:0 auto;height:100px;padding-top:30px">
メッセージをどうぞ
</div>
</div>


</div>


<a href="#" onclick="Layer.show('glayer');">gray!!</a>

</body>
</html>