HTMLlt;dialog> 要素の使用方法-jsチュートリアル-php.cn

フロントエンド開発では、事前に構築された 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 ノードにレンダリングされ、要素インスペクターに表示されます。

How to Use the HTMLlt;dialog> 要素

レイヤーの概念は スタッキングコンテキスト を指し、ユーザーに対して 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要素。この記事が皆さんの実験のきっかけになれば幸いです!

以上がHTMLlt;dialog> 要素の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。