CSSで作るモーダルなダイアログの紹介
モーダルダイアログ。それはWEB開発では避けられない小技。普段なにげなく使われてるWEBシステムでも、たぶん「削除」や「決定」前には出てくるのではないでしょうか。でもこれホント面倒なんです、同業者しかわかってくれないだろうなあ…
昔だとどうしたっけ?
バリバリにwindow.opener/window.showModalDialogを使います。今思えばDOMの要素をイベント時に渡せたりするので直感的に実装できてよかった気がする。ピュアなJavascriptによるナイーブな実装。なんだか今でもこれでいいような気もするぞ。と、思ったけど…
www.infoq.com
chromeではサポートしなくなったとか、ふざけんな
jQueryで作ろうとしたけど?
で、jQueryに頼ろうとするわけです。何でもかんでもjQuery。jQueryにはDialogクラスがあるので、それを使ってやります。
jqueryui.com
3番めのExampleにあるようなModal Formは理想的ですね。でも若干面倒くさい。というかなんでJavascriptでsubmitしないといけないんでしょうね?めんどくさすぎです。
CSSでもできるらしい
最後にCSSでダイアログを作る例を紹介です。結構単純に書けるので、この中では一番手数が少なさそうです。ただし、そこまで汎用的には使えないかも。
www.webdesignerdepot.com