alert,confirm,promptを模倣するjxDialogを作ってみた

JavaScript

ブラウザの標準のalert等のダイアログ系をかっこよくJavaScriptで模倣してみました。サンプルを見てもらえば、分かるのですが、ダイアログが表示されると半透明のレイヤーが表示部を覆って、下に表示されている要素を選択できないようにして、モーダルダイアログをシミュレートしています。DLはこちらから

タブで移動できちゃうでしょ?

よくあるレイヤーはクリックしてもその下にあるエレメントはクリックできないのですが、タブキーで遷移して、スペースキーで普通に押せてしまいます。しかし、jxDialogで作成しているダイアログ表示ではタブキーイベントをちゃんと制御して、モーダルダイアログにしています。

カスタマイズできます

必要なライブラリはないので、比較的気楽に取り込めるんじゃないかと思います。使い方はサンプルを参照してください。デフォルトで用意しているダイアログはalert,confirm,promptだけですが、jxDialog.Baseクラスを継承して、自分専用のモーダルダイアログを作成する事もできます。version 0.2からinnerHTMLでもかけるようになりました。jsDialog.simple関数のmessageにhtmlを指定すればmessageがinnerHTMLとして動作するようになります。

キーイベントって結構鬼門？

WindowsとMacintoshでのkeyイベントの扱いの違い(ブラウザ毎じゃなくてOS毎)でちょっと困りました。Windowsではkeydownイベントをバブリングしないようにすれば問題ないのですが、Macintoshではkeypressイベントなんですね。これがすぐに分からず、マシンを行ったり来たりしました。あ、Linuxとかで試してないので、また挙動が違ったりするのかもしれません。

また気が向けば、どうやって作成しているのかについて説明を書こうかと思います。

ちなみに、テストは以下のブラウザで行いました。