Scroll-Locked Dialogs – Frontend Masters Boost
I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) I was reading Locking scroll with :has() from Robb Owen, and he gets into how you might want t
Building a dialog component | Articles | web.dev
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
WAI-ARIA Authoring Practice Dialog(Modal)のフォーカス管理 - /var/log/sukoyakarizumu
この記事は、Web Accessibility Advent Calendar 2017 3日目の記事です。 はじめに モーダルなダイアログを開いたときには、ダイアログの外側の要素は操作できないようにしなくてはなりません。マウス操作だけではなく、キーボードなどによるフォーカスもダイアログの外側にあたらないようにしなければなりません。 この記事では、WAI-ARIA Authoring Practiceの実装をもとにフォーカス管理の方法について学んだTipsをメモしておきます。 WAI-ARIA Authoring Practice -Dialog(Modal) github 実装の基本方針 ダイアログの外側にフォーカスがあたったことを検出して、フォーカスを適切な位置に戻します。ダイアログの外側にフォーカスがあてるには、例えば以下のような操作が考えられます。 A) ダイアログの先頭の要素にフ
Meet the New Dialog Element
HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss. I’ve embedded a full working demo at the end of this article, but if you want to check it out as you read along, you can see it here. Here is the markup f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animating the Dialog Element – Frontend Masters Boost
Dialogs and popovers seem similar. How are they different?
HTML Dialog | 12 Days of Web
