dialog タグエレメント
dialog タグエレメントは、簡易なポップアップダイアログやモーダルウィンドウを表示できる HTML タグエレメントです。
alert() メソッドとの違いは、<dialog> は別ウィンドウではなく、ウィンドウ内で表示されます。
中央に配置されます、open属性によって、予め表示しておかないと、スクリプトで表示操作しない限りは表示されません。
<dialog open="true"> test text </dialog>
上記の表示例から、表示画面の中心付近に表示されることが分かります。
JavaScript との組み合わせでカスタマイズできるダイアログ、モーダルダイアログを作成できます。
CSS が利用できるのでデザインも自由に行うことができます。詳しくは「Example」を参照してください。
- ad -
Example
<dialog> エレメントの例です。JavaScript を使用しています。「Close」ボタンをクリックするとダイアログを閉じるだけのシンプルな例です。
以下の「確認」ボタンをクリックしてください。Example が動きます。
「ESC」キーを押してみてください。cancel イベントが発生します。続いて close イベントが発生します。
HTMLDialogElement.showModal() で開いたモーダルダイアログのみに反応します。.show() で開くダイアログでは反応しません。
JavaScript
<dialog> エレメントのインターフェイスは、HTMLDialogElement で定義されています。詳しくは HTMLDialogElement を参照してください。
- ad -