MOONGIFT

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。

JavaScriptで簡単に作れるモーダルウィンドウ「subModal」

タグ: [] [] [] [] [] [] []

buzz_button

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

ピクチャ 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/

March 20th, 2009 Posted by admin | コメントはありません

No Comments »

No comments yet.

Leave a comment

MOONGIFTネットワーク。こちらもぜひご覧ください。
MOONGIFT
Open Service
Rails 2.0
Resident on Net
iPhone最適化
リーンソフトウェア
MarketPedia
Producing Web
Cool Coding