showModal() メソッド

HTMLDialogElement.showModal()

　showModal() メソッドは、<dialog> エレメントを表示に切り替えるメソッドです。 <dialog> エレメントの独自メソッドの一つです。詳しくは HTMLDialogElement のメソッド を参照してください。

　<dialog> エレメントを表示するためのメソッドには showModal() と show() メソッドがあります。
　showModal() メソッドは <dialog> エレメント以外を操作できないようにします。ユーザーによる返答がない限りは次に進めないようにしたい場合には showModal() メソッドを使用します。

document.getElementById('dialog_btn').addEventListener('click', function() {
	var elem_ = document.querySelector("dialog#example");
	if ( !elem_.open && elem_.showModal ) {
		elem_.showModal();
	}
});

document.getElementById('close_btn').addEventListener('click', function() {
	var elem_ = document.querySelector("dialog#example");
	if( elem_.open ){
		elem_.close();
	}
});

　上記の例は <dialog> エレメントを開く機能と閉じる機能を分けて示してあります。
　showModal() メソッドは <dialog> エレメント以外を操作できないようにします。そのために閉じる機能を別で設ける必要があります。
　動きについては Example を参照してください。

　showModal() メソッドによって開いた <dialog> エレメントより下のレイヤーには ::backdrop 疑似エレメントが使用できます。
　 <dialog> エレメントより下のレイヤーのスタイルを好みに変えることができます。

引数（Parameter Values）

　showModal() メソッドに引数はないです。

返り値（Return Values）

　showModal() メソッドからの返り値はありません。