ダイアログ

アラートやサブウインドウ、フォームなどの必要な内容を強調して表示できるUI

Invoker Commands APIを使用して開くアクションを設定するとシンプルです。

html

<button class="btn btn-fill" commandfor="mydialog" command="show-modal">ダイアログ表示</button>
<dialog id="mydialog" class="dialog">
    <h2 class="dialog-title">ダイアログタイトル</h2>
    <p>ダイアログの補助テキストが入ります。ダイアログの補助テキストが入ります。</p>
    <div>
        <button>実行</button>
        <button>閉じる</button>
    </div>
</dialog>