<dialog>ってなんだ？2

2021年のブログでは、Safariが対応していないので、あまり使えないという文脈で<daialog>要素書いていましたが、あれから2年がすぎ、現在ではiOSを含め対応していますので、改めて紹介します。

dialog要素は、小さいウィンドウ（”ダイアログボックス”）の形式で、ユーザーはこのウィンドウを操作してタスクを実行したり、情報を収集したりする、アプリケーションの一時的な部分を表す。ユーザーが終了すると、ダイアログはアプリケーションによって自動的に閉じる、またはユーザーによって手動で閉じることができる。
https://momdo.github.io/html/interactive-elements.html#the-dialog-element

また、open属性に関しては、

open属性は、真偽属性である。指定される場合、dialog要素はアクティブであり、ユーザーが操作できることを示す。

open属性が指定されないdialog要素は、ユーザーに表示されるべきでない。この要件は、スタイルレイヤーを通して間接的に実装されてもよい。たとえば、推奨されるデフォルトのレンダリングをサポートするユーザーエージェントは、Renderingセクションで説明されるCSSルールを使用してこの要件を実装する。
https://momdo.github.io/html/interactive-elements.html#the-dialog-element

と記載されています。

<dialog>のマークアップ
<dialog>を操作するためのメソッド
<dialog>の実装
1. HTML
2. JavaScript

<dialog>のマークアップ

実際にdialogをマークアップする場合は下記のようになります。

<dialog open>
　　　　<p>ダイアログが表示されました。</p>
</dialog>

open属性が指定されていることで、ダイアログボックスが表示されます。

<dialog>を操作するためのメソッド

HTML Standard 仕様書には dialog 要素によるダイアログを操作するための特別なJavaScriptのメソッドが定義されています。

dialog.show()

dialog要素を表示する。

dialog.showModal()

dialog要素を表示し、一番上のモーダルダイアログにする。
この方法は、autofocus属性を履行する。

dialog.close( [ result ] )

dialog要素を閉じる。
引数が与えられた場合、戻り値を提供する。

dialog.returnValue[ = result ]

dialogの戻り値を返す。
戻り値を更新する設定が可能である。

<dialog>の実装

HTML

<dialog class="dialog">
  <p>ダイアログが表示されました。</p>
  <button class="closeDialog">CLOSE</button>
</dialog>
<button class="openDialog">OPEN</button>
<button class="openDialog2">showModal</button>

JavaScript

<script>
let dialog = document.querySelector('.dialog');
let openBtn = document.querySelector('.openDialog');
let openBtn2 = document.querySelector('.openDialog2');
let closeBtn = document.querySelector('.closeDialog');

openBtn.addEventListener('click', function() {
    dialog.show();
});
openBtn2.addEventListener('click',function(){
  dialog.showModal();
});
closeBtn.addEventListener('click',function(){
  dialog.close();
});
</script>

実際の動きはこのようになります。

ダイアログが表示されている間は、操作ができなくなります。

また、.showModal()を使うと、背景が灰色になり、画面中央に表示されます。今までのJavaScriptで、モーダルウィンドウを制作するよりも、手軽に実装できるのがいいですね。
iOS15.4以上であれば、iPhoneでも対応しています。そろそろ積極的に使っていっていい時期だと思います。