HTMLlt;dialog> 要素の使用方法

フロントエンド開発では、事前に構築された UI コンポーネントを構築または使用することが一般的なタスクです。ただし、これらのコンポーネントには制限があることがよくあります。通常、これらは特定のフレームワークに関連付けられており、複雑で標準化されていないロジックが必要です。長い間、ダイアログ ウィンドウなどの基本的な UI コンポーネントはカスタム実装、またはより単純な場合には、alert()、prompt()、confirm() などの組み込み JavaScript メソッドに依存していました。

嬉しいことに、ネイティブの

を使用してこのコンポーネントを実装できるようになりました。 HTML 要素。HTML5 標準の一部であり、最新のすべてのブラウザで完全にサポートされています。

HTML タグは、W3C 作業草案の一部として 2013 年 5 月に導入され、

などのインタラクティブな要素とともに開始されました。 一般的な UI の課題に対処します。 2014 年にリリースされた

当初は Google Chrome と Opera でのみサポートされていました。

の完全なサポートFirefox と Safari では 2022 年 3 月になって初めて導入され、実稼働プロジェクトでの採用が遅れました。ただし、主要ブラウザによる 2 年以上のサポートにより、

要素が安定してカスタム

を置き換えられるようになりました

の機能を見てみましょう。さらに詳しく。

使用上の主要な側面

HTML タグは、ポップアップ または モーダル ウィンドウ として機能する、デフォルトで非表示のダイアログ ボックスを作成します。

ポップアップは、Cookie メッセージ、消えるトースト アラート、ツールヒント、または右クリックのコンテキスト メニュー要素などの単純な通知を表示するためによく使用されます。

モーダル ウィンドウは、ユーザーの確認を必要とする通知や警告、複雑なインタラクティブ フォーム、画像やビデオのライトボックスなど、ユーザーが特定のタスクに集中できるようにします。

ポップアップはページとの対話を妨げませんが、モーダル ウィンドウはドキュメントをオーバーレイし、背景を暗くし、他のアクションをブロックします。この動作は、スタイルやスクリプトを追加しなくても機能します。唯一の違いは、ダイアログを開くために使用される方法です。

ダイアログウィンドウを開く方法

— ポップアップ:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— モーダルウィンドウ:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

どちらの場合も、 を開くと、タグは、その open 属性を true に設定します。直接設定すると、ダイアログがモーダルではなくポップアップとして開きます。モーダル ウィンドウをレンダリングするには、適切なメソッドを使用する必要があります。最初に開くポップアップを作成するために JavaScript は必要ありません。

<dialog open>Hi, I'm a popup!</dialog>

試してみる:

• .show() メソッドを使用してポップアップを開く: https://codepen.io/alexgriss/pen/zYeMKJE
• .showModal() メソッドを使用してモーダル ウィンドウを開く: https://codepen.io/alexgriss/pen/jOdQMeq
• open 属性を直接変更する: https://codepen.io/alexgriss/pen/wvNQzRB

ダイアログウィンドウが閉じようとしています

ダイアログ ウィンドウは、開いた方法に関係なく、同じ方法で閉じます。ポップアップまたはモーダル ウィンドウを閉じる方法は次のとおりです:

— .close() メソッドを使用:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— Method="dialog" 属性を持つフォームで送信イベントをトリガーすることによって:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— Esc キーを押します:

Esc キーで閉じることはモーダル ウィンドウでのみ機能します。最初に cancel イベントをトリガーしてから閉じるため、フォーム内の変更が保存されていないことをユーザーに簡単に警告できます。

試してみる:

• close メソッドを使用してダイアログ ボックスを閉じる: https://codepen.io/alexgriss/pen/GRzwjaV
• 送信フォームからダイアログ ボックスを閉じる: https://codepen.io/alexgriss/pen/jOdQVNV
• Esc キーでモーダル ウィンドウを閉じる: https://codepen.io/alexgriss/pen/KKJrNKW
• Esc キーでモーダル ウィンドウが閉じないようにする: https://codepen.io/alexgriss/pen/mdvQObN

クローズ時の戻り値

method="dialog" 属性を使用してフォームでダイアログを閉じると、送信ボタンの値を取得できます。これは、クリックされたボタンに基づいてさまざまなアクションをトリガーする場合に便利です。値は returnValue プロパティに保存されます。

試してみましょう: https://codepen.io/alexgriss/pen/ZEwmBKx

仕組みを詳しく見てみる

ダイアログ ウィンドウの仕組みとブラウザ実装の詳細を詳しく見てみましょう。

ポップアップの仕組み

を開く.show() を使用したポップアップとして、または open 属性により、DOM 内のposition:Absolute を使用して自動的に配置されます。余白や境界線などの基本的な CSS スタイルが要素に適用され、ウィンドウ内の最初のフォーカス可能な項目が autofocus 属性によって自動的にフォーカスされます。ページの残りの部分はインタラクティブなままです。

モーダルウィンドウの仕組み

モーダル ウィンドウはポップアップよりも複雑な方法で設計され、動作します。

ドキュメントのオーバーレイ

.showModal() でモーダル ウィンドウを開くと、要素は、ページの表示領域全体をカバーする特別な HTML レイヤーでレンダリングされます。この層は最上位層と呼ばれ、ブラウザによって制御されます。 Google Chrome などの一部のブラウザでは、各モーダルはこのレイヤー内の個別の DOM ノードにレンダリングされ、要素インスペクターに表示されます。

レイヤーの概念は スタッキング コンテキスト を指し、ユーザーに対して Z 軸に沿って要素を配置する方法を定義します。 CSS で z-index 値を設定すると、要素のスタッキング コンテキストが作成され、そのコンテキスト内で子の位置が計算されます。モーダル ウィンドウは常にこの階層の最上位にあるため、Z インデックスは必要ありません。

スタッキング コンテキストについて詳しくは、MDN をご覧ください。

トップレイヤーでレンダリングされる要素の詳細については、MDN にアクセスしてください。

ドキュメントのブロック

モーダル要素が最上位レイヤーでレンダリングされると、::backdrop 疑似要素が、表示されるドキュメント領域と同じサイズで作成されます。この背景により、pointer-events: none CSS ルールが設定されている場合でも、ページの残りの部分との対話が妨げられます。

不活性属性はモーダル ウィンドウを除くすべての要素に自動的に設定され、ユーザーのアクションをブロックします。クリックとフォーカスのイベントが無効になり、スクリーン リーダーやその他の支援技術が要素にアクセスできなくなります。

不活性属性について詳しくは、MDN をご覧ください。

集中動作

モーダルが開くと、その中の最初のフォーカス可能な要素が自動的にフォーカスを取得します。最初にフォーカスされた要素を変更するには、autofocus または tabindex 属性を使用できます。ダイアログ要素自体に tabindex を設定することはできません。ダイアログ要素は、ページ上で不活性ロジックが適用されない唯一の要素であるためです。

ダイアログが閉じられると、フォーカスはダイアログを開いた要素に戻ります。

モーダルウィンドウによるUXの問題の解決

残念ながら、

のネイティブ実装は、要素は、モーダル ウィンドウとの対話のすべての側面をカバーしているわけではありません。次に、モーダル ウィンドウを使用するときに発生する可能性のある主な UX 問題とその解決方法について説明したいと思います。

スクロールブロック

ネイティブ HTML5 モーダル ウィンドウは、その下のコンテンツとの対話をブロックする ::backdrop 擬似要素を作成しますが、ページ スクロールは依然としてアクティブです。これはユーザーの注意をそらす可能性があるため、モーダルが開いたときに本文のコンテンツを切り取ることをお勧めします:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

このような CSS ルールは、モーダル ウィンドウを開いたり閉じたりするたびに動的に追加および削除する必要があります。これは、次の CSS ルールを含むクラスを操作することで実現できます:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

サポート状況がプロジェクトの要件を満たしている場合は、:has セレクターを使用することもできます。

<dialog open>Hi, I'm a popup!</dialog>

試してみましょう: https://codepen.io/alexgriss/pen/XWOyVKj

ウィンドウの外側をクリックしてダイアログを閉じる

これはモーダル ウィンドウの標準的な UX シナリオであり、いくつかの方法で実装できます。この問題を解決するには 2 つの方法があります:

::backdrop 疑似要素の動作に基づくメソッド

::backdrop 疑似要素をクリックすると、ダイアログ要素自体をクリックしたとみなされます。したがって、モーダル ウィンドウのコンテンツ全体を追加の

で囲むと、次に、ダイアログ要素自体をカバーすると、クリックがどこに向けられたのか (背景またはモーダル ウィンドウのコンテンツ) を判断できます。

のブラウザのデフォルトのパディングと境界線のスタイルをリセットすることを忘れないでください。誤ってクリックされたときにモーダル ウィンドウが閉じないようにする要素:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

ここで、モーダル ウィンドウの境界線と余白の共通スタイルを内側のラッパーにのみ適用します。

内部のラッパー要素ではなく、背景をクリックしたときにのみモーダル ウィンドウを閉じる関数を記述する必要があります。

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

試してみましょう: https://codepen.io/alexgriss/pen/mdvQXpJ

ダイアログ ウィンドウのサイズの決定に基づく方法

この方法は、モーダル コンテンツに追加のラッパーが必要だった最初の方法とは異なります。ここでは、余分なラッピングは必要ありません。必要なのは、クリックしたときにカーソルの位置が要素の領域の外に出ているかどうかを確認することだけです:

<dialog open>Hi, I'm a popup!</dialog>

試してみましょう: https://codepen.io/alexgriss/pen/NWoePVP

ダイアログウィンドウのスタイル設定

要素は、多くのネイティブ HTML 要素よりもスタイルの点で柔軟です。ダイアログ ウィンドウのスタイルを設定する例をいくつか示します:

::backdrop セレクターを使用した背景のスタイル設定: https://codepen.io/alexgriss/pen/ExrOQEO

アニメーションダイアログウィンドウの開閉: https://codepen.io/alexgriss/pen/QWYJQJO

サイドバーとしてのモーダルウィンドウ: https://codepen.io/alexgriss/pen/GRzwxgr

アクセシビリティ

長い間、要素にはアクセシビリティの問題がいくつかありましたが、現在はスクリーン リーダー (VoiceOver、TalkBack、NVDA) などの主要な支援技術で正常に動作します。

が開くと、スクリーン リーダーによってフォーカスがダイアログに移動します。モーダル ウィンドウの場合、ダイアログが閉じるまでフォーカスはダイアログ内に残ります。

デフォルトでは、要素は支援技術によって ARIA 属性 role="dialog" を持つものとして認識されます。モーダル ダイアログは、ARIA 属性 aria-modal="true" を持つものとして認識されます。

のアクセシビリティを向上させる方法をいくつか紹介します。要素:

aria-labeledby

ダイアログ ウィンドウ内には常にタイトルを含め、

の aria-labelledby 属性を指定します。要素。値はタイトルの ID に設定されます。

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

::backdrop 疑似要素のスタイルを設定する必要がある場合は、古いブラウザとの互換性を確保するために、それらのスタイルを対応する .backdrop 要素にも適用してください:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

をサポートしていないブラウザの場合のみ、動的インポートを介してポリフィルを接続することをお勧めします。要素:

<dialog open>Hi, I'm a popup!</dialog>

結論

ネイティブ HTML5 element は、モーダル ウィンドウとポップアップを実装するための比較的シンプルかつ強力なツールです。最新のブラウザで十分にサポートされており、バニラ JS とフロントエンド フレームワークの両方に基づくプロジェクトで問題なく使用できます。

この記事では、次のトピックについて説明しました:

• の問題要素の解決;
• との対話要素の API;
• ダイアログ ウィンドウがブラウザ レベルで動作する仕組み;
• モーダルに関する一般的な問題とその解決策;
• のアクセシビリティの向上スクリーン リーダーなどの支援技術の要素;
• のブラウザサポートを拡大します。要素。

最後に、記事で説明されている主な側面を考慮した、純粋な JS でのモーダル ウィンドウ コンポーネントの実装を確認することをお勧めします: https://codepen.io/alexgriss/pen/abXPOPP

の操作について共有したかったのはこれだけです。 HTML要素。この記事が皆さんの実験のきっかけになれば幸いです!