Custom JavaScript Dialog Boxesを使ってみる
「Custom JavaScript Dialog Boxes」はJavaScriptでシンプルなモーダルダイアログを実現するライブラリです。使い方も簡単で、
- 1.必要なソースとcssをインポートして、
<link rel="stylesheet" type="text/css" href="dialog_box.css" /> <script type="text/javascript" src="dialog_box.js"></script>
- 2.htmlのすべての本文を囲むようにid='content'な要素を追加。
- このライブラリでは、モーダル化は本文にマスキング用の要素をかぶせることで実現していて、
- id='content'な要素を元にIEでマスキングする範囲を特定している模様。
- 3.後は「showDialog()」関数を実行すればOK。
- 引数で、「ダイアログのタイトル」、「本文」、「ダイアログの種類」、「一定時間経過すると自動で消えるダイアログにするかどうか」が指定できます。
- 「ダイアログの種類」にはデフォルトでは、「error,warning,success,prompt」のいずれかが指定できます。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 必要なソース、CSSをインポート --> <link rel="stylesheet" type="text/css" href="dialog_box.css" /> <script type="text/javascript" src="dialog_box.js"></script> </head> <body id="content"> <ul> <!-- クリックでダイアログを表示。 --> <li><a href="javascript:showDialog('エラー','エラーが発生しました。','error');">エラーダイアログ</a></li> <li><a href="javascript:showDialog('エラー','エラーが発生しました。','error',true);">エラーダイアログ(自動で消える)</a></li> <li><a href="javascript:showDialog('警告','警告です。','warning');">警告ダイアログ</a></li> <li><a href="javascript:showDialog('成功','成功です。','success');">成功?ダイアログ</a></li> <li><a href="javascript:showDialog('確認','確認してください。','prompt');">確認ダイアログ</a></li> </ul> </body> </html>
グローバルな名前空間を汚されるのがちょっとアレだけど、機能的にはこれぐらいでいいなー。デザインもシンプルでなかなかよいかと。