グレーアウト表示ライブラリ: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>
<!--●CSSの読み込み-->
<link rel="stylesheet" href="./glayer.css" type="text/css" /><body>
<!--●オーバーレイ用divの定義 クリック時に閉じるよう、onlclickイベントを設定 -->
<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>
<!--●onclickイベントで表示メソッド呼び出し-->
<a href="#" onclick="Layer.show('glayer');">gray!!</a></body>
</html>
上記サンプルの実行例( gray!! テキストをクリックした後の画面 )が次のイメージ。
仕組みとしては、<div id="glayer"> の要素が画面全体に広がり、半透明になっている感じです。
この際、ページサイズをうまく取得しないといけないので、JavaScriptで取得してちゃんとサイズに合わせています。
<div id="glayer"> の中には自分の好きなタグを記述できるので、自由に書き換えて使うことができますね。
LightBox関連エントリ
LightBox.jsにスライドショー機能を追加するSlidebox
画像やページをLightBox風に表示できるThickbox
LightBox風エフェクトライブラリのiBox
LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox
LightBoxライクに同一ページ内の要素をポップアップするライブラリ
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ