備忘録的プログラミングリファレンス

dialog タグエレメント

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

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

dialog タグエレメント
<dialog open="true">
	test text
</dialog>
表示例
test text
詳しくは 動作の確認 を参照してください

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

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

- ad -

属性

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

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

内部コンテンツ（innerHTML）

動作の確認

Example

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

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

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

JavaScript

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

- ad -

関連（Related）