ITエンジニア/デザイナ向けにオープンソースを毎日紹介

モーダルウィンドウとはアプリケーションから呼び出したウィンドウで、それに対して何からのアクション(閉じるのボタンを押すなど)を起こさないと呼び出し元のアプリケーションに戻れないようなウィンドウだ。ダイアログもその一種と言えるだろう。


ピクチャ 66.png

モーダルウィンドウを実装

 

Webブラウザではよくalertのダイアログが用いられるが、あまり格好は良くないしグラフィカルな内容は伝えられない。そこで使いたいのがsubModalだ。

今回紹介するオープンソース・ソフトウェアはsubModal、モーダルウィンドウを簡単に実装するJavaScriptライブラリだ。

subModalが対応しているのはIE6以上、Firefox 1.x以上、Safari、Opera 7以上となっている。相当昔のブラウザから対応しているようだ。JavaScriptファイルとCSSファイルを読み込むだけで良いが、既存のライブラリとバッティングしないかのチェックは必要そうだ。


ピクチャ 67.png

リンクのclassで指定することもできる

 

JavaScriptの関数を呼び出して表示を行う他に、HTMLのclass名で指定するだけでモーダルウィンドウを生成するモードもある。class名でsubmodalを指定するか、submodal-200-400のようにハイフンで幅と高さを指定すれば、後はリンク先のURLがモーダルウィンドウになる。

呼び出されたウィンドウには自動的にクローズボックスがつくので、それをクリックすればウィンドウが閉じて呼び出し元に操作が戻る。インラインのデータは表示できないが、外部のデータのみであってもそれなりに利用範囲は多そうだ。

コンタクトフォームやフィードバック、ユーザを招待するウィンドウなど画面遷移すると面倒な操作はモーダルウィンドウで行わせると利用度が増える可能性がある。適所を見極めて利用して欲しい。

 

submodal -Google Code

 http://code.google.com/p/submodal/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2