注目キーワード

MOONGIFT

OSSを中心としたメディアポータル

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

ピクチャ 66.png
モーダルウィンドウを実装 0

 

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

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

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

ピクチャ 67.png
リンクのclassで指定することもできる 0

 

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

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

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

 

submodal -Google Code
 
http://code.google.com/p/submodal/ 0

MOONGIFTの関連記事

このエントリーを含むTwitter

Related Posts Plugin for WordPress, Blogger...
新規購読
新規購読

プレミアムでしか読めない記事が159あります。ぜひ登録を!

  • オープンブロックス - OpenBlockS
  • 広告募集

ぷらっとオンラインおすすめ商品もっと見る

もっと見る

人気記事もっと見る