なんとな~くしあわせ?の日記

「そしてそれゆえ、知識そのものが力である」 (Nam et ipsa scientia potestas est.) 〜 フランシス・ベーコン

CSSで作るモーダルなダイアログの紹介

モーダルダイアログ。それはWEB開発では避けられない小技。普段なにげなく使われてるWEBシステムでも、たぶん「削除」や「決定」前には出てくるのではないでしょうか。でもこれホント面倒なんです、同業者しかわかってくれないだろうなあ…

昔だとどうしたっけ?

バリバリにwindow.opener/window.showModalDialogを使います。今思えばDOMの要素をイベント時に渡せたりするので直感的に実装できてよかった気がする。ピュアなJavascriptによるナイーブな実装。なんだか今でもこれでいいような気もするぞ。と、思ったけど…
www.infoq.com

chromeではサポートしなくなったとか、ふざけんな

で、それのワークアラウンド
qiita.com

jQueryで作ろうとしたけど?

で、jQueryに頼ろうとするわけです。何でもかんでもjQueryjQueryにはDialogクラスがあるので、それを使ってやります。
jqueryui.com

3番めのExampleにあるようなModal Formは理想的ですね。でも若干面倒くさい。というかなんでJavascriptでsubmitしないといけないんでしょうね?めんどくさすぎです。

CSSでもできるらしい

最後にCSSでダイアログを作る例を紹介です。結構単純に書けるので、この中では一番手数が少なさそうです。ただし、そこまで汎用的には使えないかも。
www.webdesignerdepot.com