dialog タグエレメント

　dialog タグエレメントは、簡易なポップアップダイアログやモーダルウィンドウを表示できる HTML タグエレメントです。
　alert() メソッドとの違いは、<dialog> は別ウィンドウではなく、ウィンドウ内で表示されます。

　中央に配置されます、open属性によって、予め表示しておかないと、スクリプトで表示操作しない限りは表示されません。

dialog タグエレメント

<dialog open="true">
	test text
</dialog>

表示例

詳しくは動作の確認を参照してください

　上記の表示例から、表示画面の中心付近に表示されることが分かります。

　JavaScript との組み合わせでカスタマイズできるダイアログ、モーダルダイアログを作成できます。
　CSS が利用できるのでデザインも自由に行うことができます。詳しくは「Example」を参照してください。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

Attribute	Value	Extra information
id		cssにも使えます。エレメントをユニークとします。
class		cssに使います。同名のclassは同じスタイルが適応されます。
open		予め表示しておく。

　<dialog> エレメントの例です。JavaScript を使用しています。「Close」ボタンをクリックするとダイアログを閉じるだけのシンプルな例です。
　以下の「確認」ボタンをクリックしてください。Example が動きます。

　「ESC」キーを押してみてください。cancel イベントが発生します。続いて close イベントが発生します。
　HTMLDialogElement.showModal() で開いたモーダルダイアログのみに反応します。.show() で開くダイアログでは反応しません。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

HTML内容

CSS内容

Script内容

　<dialog> エレメントのインターフェイスは、HTMLDialogElement で定義されています。詳しくは HTMLDialogElement を参照してください。