dialog要素を使ってみる

dialog要素を使った実装を試してみます。

dialog要素について

dialog要素は名前の通り、ダイアログやモーダルなどのUIを実装するための要素です。
open属性を設定することで表示されますが、open属性を直接操作するのではなく、JavaScriptのshow()メソッドかshowModal()メソッドを使用して表示することが推奨されています。

dialog要素はアクセシビリティの面も考慮された実装になっています。
実例は後述していますが、キーボード操作でダイアログを開いた際はダイアログ内にフォーカスが移動して、ダイアログを閉じた際はダイアログを開く前のフォーカス位置に戻ります。
showModal()メソッドを使ったダイアログの場合、Escキーでもダイアログを閉じることができます。

対応ブラウザに関して、主要なブラウザでは特に問題なくサポートされているようですが、Safariが15.4からの対応になるので、場合によっては注意が必要かもしれません。

サンプルコード

dialog要素を実際に使ってみます。

<button id="open-btn">dialogを開く</button>

<dialog id="dialog">
  <p>dialogの内容</p>
  <p><a href="#">リンクテスト</a></p>
  <p><button id="close-btn">dialogを閉じる</button></p>
  <form method="dialog">
    <button>dialogを閉じる2</button>
  </form>
</dialog>

前述の通り、dialog要素を表示する際はshow()メソッドかshowModal()メソッドを使用します。
まずはshow()メソッドを使用した場合です。

// dialogを開く
document.getElementById('open-btn').addEventListener('click', function() {
  document.getElementById('dialog').show();
});
// dialogを閉じる
document.getElementById('close-btn').addEventListener('click', function() {
  document.getElementById('dialog').close();
});

dialogを閉じる際はclose()メソッドを使用するか、form要素のmethod属性にdialogを指定したフォームを送信します。
これでdialogの開閉ができました。
show()メソッドでdialogを表示するデモページ

次にshowModal()メソッドを使用した場合です。

// dialogを開く
document.getElementById('open-btn').addEventListener('click', function() {
  document.getElementById('dialog').showModal();
});
// dialogを閉じる
document.getElementById('close-btn').addEventListener('click', function() {
  document.getElementById('dialog').close();
});

show()メソッドで実装した場合と少し違い、黒透過の背景付きで表示されるようになりました。
showModal()メソッドでdialogを表示するデモページ

chromeのデベロッパーツールで確認すると、showModal()での実装の方はtop-layerというレイヤーがdocumentの外側に配置されているのが分かります。

このTop layer(最上位レイヤー)は他レイヤーの最上位に位置するため、z-indexなどの考慮が必要なくなります。

showModal()の黒透過部分は::backdrop疑似要素で設定されています。
背景部分を含めてdialogのスタイルを変更してみます。

<dialog id="dialog" class="dialog">
  <p>dialogの内容</p>
  <p><a href="#">リンクテスト</a></p>
  <p><button id="close-btn">dialogを閉じる</button></p>
  <form method="dialog">
    <button>dialogを閉じる2</button>
  </form>
  ～略～
  <p>dialogの内容</p>
</dialog>

.dialog {
	border: none;
	padding: 0;
	width: 300px;
}
.dialog::backdrop {
	background: rgba(255, 0, 0, 0.6);
}

画面高さよりコンテンツ量が多い場合、スクロールバーが表示されます。
dialogのスタイルを変更するデモページ