使用上の主要な側(cè)面

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

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

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

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

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

— ポップアップ:

<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();

どちらの場(chǎng)合も、<ダイアログ> を開くと、タグは、その open 屬性を true に設(shè)定します。直接設(shè)定すると、ダイアログがモーダルではなくポップアップとして開きます。モーダル ウィンドウをレンダリングするには、適切なメソッドを使用する必要があります。最初に開くポップアップを作成するために 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 キーで閉じることはモーダル ウィンドウでのみ機(jī)能します。最初に cancel イベントをトリガーしてから閉じるため、フォーム內(nèi)の変更が保存されていないことをユーザーに簡(jiǎn)単に警告できます。

試してみる:

• 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

クローズ時(shí)の戻り値

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

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

仕組みを詳しく見てみる

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

ポップアップの仕組み

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

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

モーダル ウィンドウはポップアップよりも複雑な方法で設(shè)計(jì)され、動(dòng)作します。

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

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

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

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

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

ドキュメントのブロック

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

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

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

集中動(dòng)作

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

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

モーダルウィンドウによるU(xiǎn)Xの問題の解決

殘念ながら、

<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();

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

<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();

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

<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();

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

以上がHTMLlt;dialog> 要素の使用方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。