読者です 読者をやめる 読者になる 読者になる

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

ClojureとかAWSの設定とかをメモする技術ブログ

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

Javascript プログラミング


モーダルダイアログ。それは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