読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

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

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

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

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

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

実装は以下の通りです。

IE未対応

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

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

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

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