smartdialog.js

「Yahoo!画像検索」や「Lightbox」のように、画面全体にレイヤーを重ねてダイアログを表示する JavaScript のライブラリです。
他のライブラリと比較して、任意の色を背景色に選ぶことができ、CSS ファイルや透過画像が不要だという長所があります。
別途、「prototype.js」と「scriptaculous.js(effects.js)」のライブラリが必要です。

サンプル

デフォルトの動作（ホワイトアウト）
グレーアウト・待ち時間なし・閉じるボタンなし・枠線なし・200px × 50px
縦長・待ち時間なし・緑二重枠線
薄いピンク(不透明度 0.5)・待ち時間 3 秒・ダイアログなし
ブルースクリーン・待ち時間なし・同色ダイアログ・背景クリック無効・ボタンのラベル変更
画像を表示・枠線 1px・500px × 400px

ダウンロード

クリエイティブ・コモンズ 表示 2.1 日本 と MIT License のデュアルライセンスの下で自由に使用できます。ライセンスは好きな方を選ぶことができます。ソース内のリンクを必ず残してください。

使い方

ヘッダー

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="./smartdialog.js"></script>

貼り付けたいところ

<input type="button" value="サンプル1" onclick="javascript:sdlog.show('表示する文字列',オプション1,オプション2)" />

設定

表示する文字列

文字列には HTML を含むことができます。

オプション 1 (オーバーレイに関する設定)

opacity
不透明度。'0.0'～'1.0'の値を指定。(ex:'0.7')
duration
表示にかかる時間 (秒)。(ex:'1.0')
backgroundColor
オーバーレイの色。(ex:'#fff')
noClickHide
'1'を設定すると背景クリックでダイアログ非表示を無効にする。(default:'0')
全部設定した例
javascript:sdlog.show(null,{opacity:'0.7', duration:'1.0', backgroundColor:'#fff', noClickHide:'0'})

オプション 2 (ダイアログに関する設定)

top
画面上端からの高さ (%)。(ex:'40%')
left
画面左端からの幅 (%)。(ex:'50%')
width
ダイアログの幅 (px)。(ex:'300')
height
ダイアログの高さ (px)。(ex:'150')
textAlign
行揃え。'left', 'right', 'center' のいずれかを指定。(ex:'center')
padding
ダイアログ内側の余白 (px)。(ex:'5')
border
枠線の幅、種類、色。不要な場合は 'none' を指定。(ex:'2px solid #666')
backgroundColor
ダイアログの背景色。(ex:'#fff')
noHideButton
'1' を設定するとボタンを表示しない。(default:'0')
nameHideButton
閉じるボタンのラベル。(default:'close')
全部設定した例
javascript:sdlog.show(null,null,{top:'40%', left:'50%', width:'300', height:'150', align:'center', padding:'5', border:'2px solid #666', backgroundColor:'#fff', noHideButton:'0', nameHideButton:'close'})

お問い合わせ

不具合、バグ、新機能追加の要望などは以下のメールアドレスへお願いします。
メールアドレス

リンク・参考になったページなど