ダイアログ

モーダル ダイアログは、ウェブページ上の特別なタイプのポップアップ ボックスで、ユーザーの操作を妨げるポップアップです。他にも ダイアログをポップアップする有効なユースケースをいくつか紹介していますが、 決定する必要がありますモーダル ダイアログは、ユーザーに特定のコンテンツへのフォーカスを強制し、少なくとも一時的に無視するよう強制する これについては後ほど説明します

ダイアログは、モーダル（ダイアログ内のコンテンツのみ操作可能）と非モーダル（操作は可能）のいずれかにできます。 ダイアログ外のコンテンツを含む）。モーダル ダイアログは、他のページ コンテンツの上に表示されます。その他 デフォルトで、半透明な背景で隠されます。

ダイアログを作成するセマンティック HTML の <dialog> 要素 には、セマンティクス、キーボード操作、HTMLDialogElement インターフェースのすべてのプロパティとメソッドが付属しています。

モーダル ダイアログ

モーダル <dialog> の例を次に示します。[モーダル ダイアログを開く] でダイアログを開く] ボタンを離します。開いた後、ダイアログを閉じる方法は 3 つあります。1 つは、Esc キー、もう 1 つは、 formmethod="dialog" があるボタン set（またはフォーム自体に method="dialog" が設定されている場合）、および HTMLDialogElement.close() メソッドを使用します。

HTMLDialogElement には 3 つの主要なメソッドがあり、HTMLElement から継承されたすべてのメソッドが含まれます。

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

この<dialog>は HTMLDialogElement.showModal() 経由で開かれたためです メソッドであり、これはモーダル ダイアログです。モーダル ダイアログを開くと、ダイアログ自体が無効になり、それ以外はすべて不明瞭になります。もし ダイアログの外側の UI にカーソルを合わせると、すべての要素が pointer-events: none; のように動作していることがわかります。 が設定されました。ダイアログを開くボタンも操作に反応しません。

ダイアログを開くと、ダイアログにフォーカスが移動します。そのダイアログ内のキーボード ナビゲーション順序の最初の要素にフォーカスが設定されます。 tab キーを何度か押すと、モーダル ダイアログが表示されている間は、ダイアログ内のコンテンツのみがフォーカスされます。 表示されます。モーダル ダイアログ以外は、ダイアログが開いている限り無効です。

ダイアログを閉じると、モーダルにかかわらず、ダイアログを開いた要素にフォーカスが戻ります。プログラマティックに ユーザーの操作に基づかないダイアログを開き、再検討してください。必要に応じて、フォーカスをダイアログが開く前の位置に戻してください。 ユーザーがダイアログを操作せずに閉じた場合に特に顕著です。

グローバル属性 inert を使用すると、有効な要素以外のすべての子孫要素を無効にできます。 クリックします。showModal() を使用してモーダル ダイアログを開くと、不活性化または非アクティブ化は無料になります。属性 明示的に設定されていない場合です。

ダイアログ以外のすべてを隠す背景は、::backdrop を使用してスタイル設定できます。 作成します。背景は、.showModal() メソッドで <dialog> を表示した場合にのみ表示されます。この疑似要素は FullScreen API の使用時に表示されるものを含め、すべての背景に一致 たとえば、画面やモニターのアスペクト比とは異なるフルスクリーン モードで動画を視聴している場合などです。

非モーダル ダイアログ

HTMLDialogElement.show() も同様にダイアログを開きますが、背景を追加したり、何かが不活性になったりすることはありません。 Esc キーで非モーダル ダイアログが閉じません。そのため、メソッド名に必ずメソッドを含めることが重要です。 閉じることができます。これにより、閉じるとダイアログの外側にある要素にフォーカスが移動することを確認できます。 によってダイアログが開かれたためです。ユーザー エクスペリエンスが最適ではない可能性があります。

ダイアログを閉じるボタンは仕様で正式に義務付けられていませんが、必須と見なします。Esc キー モーダル ダイアログは閉じますが、非モーダル ダイアログは閉じません。フォーカスを取得できるボタンが表示されていれば、アクセシビリティが向上し、 向上させることができます

ダイアログを閉じる

ダイアログを閉じるために HTMLDialogElement.close() メソッドは必要ありません。JavaScript はまったく必要ありません。<dialog> を閉じる JavaScript を使用しない場合は、<form> または formmethod="dialog" で method="dialog" を設定して、ダイアログ メソッドのあるフォームを含めます。 クリックします。

ユーザーが dialog メソッド経由で送信したとき、ユーザーが入力したデータの状態が維持されます。送信イベントが発生している間、 フォームに制約の検証が行われます（novalidate が設定されていない場合）。ユーザーデータの消去も送信も行われません。 JavaScript を使用しない閉じるボタンは、次のように記述できます。

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

お気づきかもしれませんが、autofocus 属性は この例では、閉じる <button> に設定されています。<dialog> 内で autofocus 属性が設定された要素 ページの読み込み時にフォーカスする（ダイアログが表示された状態でページが読み込まれていない場合）。ただし、ダイアログが開いているときはフォーカスが当たります。

デフォルトでは、ダイアログが開かれたときに、別のものがない限り、ダイアログ内の最初のフォーカス可能な要素がフォーカスされる 要素に autofocus 属性が設定されている。閉じるボタンに autofocus 属性を設定すると、 このメソッドは、ダイアログが開いたときにフォーカスを受け取ります。ただし、<dialog> 内の autofocus を含む 慎重に行う必要があります。オートフォーカス要素よりも前にあるシーケンス内のすべての要素はスキップされます。 この属性については、フォーカス レッスンで詳しく説明します。

HTMLDialogElement インターフェースには returnValue が含まれます。 プロパティです。method="dialog" を使用してフォームを送信すると、returnValue が、送信ボタンの name（存在する場合）に設定されます。 フォームを送信します。<button type="submit" name="toasty">close</button> と記述した場合、returnValue は toasty になります。

ダイアログが開かれたとき、ブール値 open 属性 が存在している場合、ダイアログがアクティブで、操作が可能です。代わりに open 属性を追加してダイアログを開くと、 .show() や .showModal() を使用する場合よりも、ダイアログはモーダルレスになります。HTMLDialogElement.open プロパティは、ダイアログが操作可能かどうか（モーダルかどうかではなく）に応じて true または false を返します。

ダイアログを開く場合は JavaScript を使用することをおすすめします（ページの読み込み時に open 属性を含め、その後で削除します）。 .close() を使用すると、JavaScript が無効な場合でもダイアログを利用できるようにできます。

補足情報

tabindex を使用しない

ダイアログを開くために有効化された要素と、ダイアログに含まれる閉じるボタン（場合によっては他のコンテンツ）は、 焦点を絞ってインタラクティブに なるようにします<dialog> 要素はインタラクティブではなく、フォーカスを受け取りません。tabindex プロパティを追加しない 直接ダイアログに追加します。

ARIA ロール

暗黙的なロールは dialog です。ダイアログで 確認やその他のユーザーからの返信を必要とする重要なメッセージを伝える確認ウィンドウであり、role="alertdialog" を設定します。 ダイアログにわかりやすい名前も付けてください。表示されるテキストでユーザー補助機能用の名前を提供できる場合は、aria-labelledby="idOfLabelingText" を追加します。

CSS のデフォルト

なお、ブラウザでは dialog のデフォルトのスタイルが提供されています。Firefox、Chrome、Edge で color: CanvasText; background-color: Canvas; に設定 Safari はユーザー エージェント スタイルシートで color: black; background-color: white; を設定します。color は body または :root ではなく、dialog から。これは予期しない可能性があります。background-color プロパティは継承されません。

理解度をチェックする

ダイアログの要素に関する知識をテストします。