JavaScriptでアラートダイアログを改装する

alert()を直接使わずにdivにスタイルを適応させて製作する

今回はJavaScriptでお馴染みの第一歩であり、デバッグ用に使われるalertメソッドですが

見た目が予想以上に殺風景ですので(特にfirefox)独自作成してみました。

alertを装飾するjQueryライブラリはいくつかあるので先に紹介しておきます。

• http://thrivingkings.com/apprise/
• http://javascript.webcreativepark.net/library/jquery_alert_dialogs

実装は以下の通りです。

IE未対応

http://yatagarasu0495.web.fc2.com/javascript/blog/alert/01.html

createElementとappendChildで要素を挿入し、削除にはremoveChildを使っています。

基本的にスタイルシートのdisplay:none;が使えそうな気もしますが、あえてソースに無駄なコードを増やさないために(display:noneを使うと画面上要素は消えるがソースは取り残される)

追加と削除を繰り返す形で実装しました。