HTMLDialogElement
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
HTMLDialogElement
インターフェイスは <dialog>
要素を操作するメソッドを提供します。 HTMLElement
インターフェースからプロパティとメソッドを継承しています。
プロパティ
親である HTMLElement
からプロパティを継承しています。
HTMLDialogElement.open
(en-US)HTMLDialogElement.returnValue
(en-US)-
DOMString
で、ダイアログの返値を設定させたり返したりします。
メソッド
親である HTMLElement
からメソッドを継承しています。
HTMLDialogElement.close()
(en-US)-
ダイアログを閉じます。任意で引数として
DOMString
を渡すことができ、これがダイアログのreturnValue
を更新します。 HTMLDialogElement.show()
(en-US)-
ダイアログをモードレスで開きます。すなわち、その間のダイアログの外のコンテンツとの対話ができます。
HTMLDialogElement.showModal()
(en-US)-
ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外との対話はブロックされます。
イベント
例
以下の例は単純なボタンを表示し、クリックすると、 <dialog>
でフォームを HTMLDialogElement.showModal()
(en-US) 関数によって開きます。そこから Cancel ボタンを押して (HTMLDialogElement.close()
(en-US) 関数で) ダイアログを閉じるか、 submit ボタンでフォームを送信するかします。
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<script>
(function() {
var updateButton = document.getElementById('updateDetails');
var cancelButton = document.getElementById('cancel');
var dialog = document.getElementById('favDialog');
dialog.returnValue = 'favAnimal';
function openCheck(dialog) {
if(dialog.open) {
console.log('Dialog open');
} else {
console.log('Dialog closed');
}
}
// Update button opens a modal dialog
updateButton.addEventListener('click', function() {
dialog.showModal();
openCheck(dialog);
});
// Form cancel button closes the dialog box
cancelButton.addEventListener('click', function() {
dialog.close('animalNotChosen');
openCheck(dialog);
});
})();
</script>
メモ: この例は GitHub 上の htmldialogelement-basic (ライブで表示) として見つけることができます。
仕様書
Specification |
---|
HTML Standard # htmldialogelement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このインターフェイスを実装している HTML 要素:
<dialog>