HTMLの<dialog>要素とCSSで、モーダル・ダイアログ ボックスを実装する方法と注意点

モーダル・ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にモーダルボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくモーダルやダイアログ ボックスを利用できるようにするものです。 <dialog>要素で、モーダル・ダイアログ ボックスを実装する方法と注意点を紹介します。 Meet the New Dialog Element 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能: モーダル・ダイアログ ボックスを実装するための<dialog>要素 <dialog>要素の基本機能 <

[nakag0711]

デスクトップアプリのUXの最大阻害要因、禁断の果実に手を出したか

[lnimroder]

jsはなんと組み込み関数のconfirm()やalert()を上書きすることができるので、それで独自ダイアログを実装するほうが早かったりする

[lazex]

dialogタグか、もう数年前に使って普通にcss/jsで作ったほうが楽で使いやすいと思って全く使ってないなぁ

[og_og]

もういい機会だからIE切っちゃおうぜ…

[quick_past]

これは揉めごとの種ですわ・・・

[hdampty7]

IE6か7のwindow.showModalDialogでダイアログ出すとPOSTできないから中をiframeにして、枠をぴったり合わせる的なことを思い出した。

[sho_yamane]

めっちゃ良さそうだけどどうせie対策で使いにくそうと思ってしまう…

[masayoshinym]

どうせこれもあれこれいじったりIE対応したりしなきゃいけないんでしょう？

[Fushihara]

いらん！contextmenu要素復活させろ

[konisimple]

これめちゃいいな

[yuki_2021]

HTMLとjavascriptでbootstrapのmodalみたいなやつを出す方法。