ywork2020.com

Title

ダイアログを表す

目次 (INDEX)

dialog とは

ここで説明する dialog とは次の語句からなるHTMLの要素です。
dialog
読み: ダイアログ
意味: 対話

目次に戻る

dialog 要素の概要

この要素は、ユーザーとの対話を目的としたダイアログボックスを提供します。

このダイアログボックスは、アラート、インスペクター、サブウィンドウなどのようなカスタマイズされたものを作成することができます。

この要素には、開始タグと終了タグが必要です。
<dialog> </dialog>

目次に戻る

サンプルコードと実行結果

実行結果の [ ダイアログを開く ] ボタンをクリックするとダイアログが開きます。 ダイアログのキャンセルボタンをクリックすると Cancel が戻ります。 選択項目を選んでから確認ボタンをクリックすると選択した値が戻ります。 選択項目を選ばずに確認ボタンをクリックすると Default が戻ります。

これらの戻った値は form 要素に method="dialog" が設定されていれば、dialog.returnValue プロパティに代入されます。

サンプルコード: HTML
<body>
	<button id="idOpen">ダイアログを開く</button>
	<dialog id="idDialog">
		<form method="dialog">
			<p>
				<label>Select(選択):
					<select id="idSelect">
						<option></option>
						<option>YWORK-1</option>
						<option>YWORK-2</option>
						<option>YWORK-3</option>
					</select>
				</label>
			</p>
			<menu>
				<button value="Cancel">Cancel(キャンセル)</button>
				<button id="idConfirm" value="Default">Confirm(確認)</button>
			</menu>
		</form>
	</dialog><br>
	<output id="idOutput">Results</output>
</body>
サンプルコード: script
<script>
	let Dialog = document.getElementById("idDialog");
	let Open = document.getElementById("idOpen");
	let Select = document.getElementById("idSelect");
	let Confirm = document.getElementById("idConfirm");
	let Output = document.getElementById("idOutput");

	Open.addEventListener("click",function(){
		if(typeof Dialog.showModal === "function"){
			Dialog.showModal();
		}
		else{
			window.alert("このブラウザはdialogをサポートしていません");
		}
	},false);

	Select.addEventListener("change",function(){
		Confirm.value = this.value;
	},false);

	Dialog.addEventListener("close",function(){
		Output.innerHTML = Dialog.returnValue;
	},false);
</script>

form 要素の method 属性に "dialog" が指定されていれば、ダイアログを閉じることができます。 その場合にフォームが送信されると、returnValue プロパティには送信するために使用されたボタンの value 値が代入されてダイアログが閉じられます。

実行結果:



Results

目次に戻る

使用できる属性

目次に戻る