概要: このチュートリアルでは、ネイティブの <dialog> 要素と JavaScript ダイアログ API を使用してダイアログを作成する方法を学びます。
JavaScript ダイアログ API の概要
HTML5 では、<dialog> 要素を使用して、モーダルまたはモードレスのダイアログを作成できます。ネイティブの <dialog> 要素には、背景の組み込みサポートと、その表示を制御するためのメソッドが含まれています。
新しいダイアログ要素を作成するには、次のように <dialog> タグを使用します
<dialog>
</dialog>Code language: HTML, XML (xml)開始 <dialog> タグと終了 </dialog> タグの間に、コンテンツを配置できます。通常、ダイアログを閉じるためのボタンが含まれています
<dialog>
<button type="button">Close</button>
</dialog>Code language: HTML, XML (xml)<dialog> 要素は、HTMLElement インターフェースから継承する HTMLDialogElement 型を持ちます。
HTMLDialogElement は、ダイアログの表示を制御するために、次のメソッドを提供します。
| メソッド | 説明 |
|---|---|
show() | モーダルダイアログを表示し、ダイアログの外側の要素を操作できるようにします。 |
showModal() | モーダルダイアログを表示し、ダイアログの外側の要素を操作できないようにします。 |
close() | ダイアログを閉じます。 |
JavaScript ダイアログ API の例
JavaScript ダイアログ API の使用例をいくつか見てみましょう。
1) 簡単なダイアログの例の作成
次のページでは、<dialog> 要素を使用して、メッセージ付きの簡単なダイアログを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Dialog API</title>
</head>
<body>
<dialog id="myDialog" open>
<p>This is a simple dialog.</p>
</dialog>
</body>
</html>Code language: HTML, XML (xml)この例では、<dialog> 要素に、ページがロードされたときに自動的に表示される open 属性が含まれています。
2) JavaScript ダイアログ API を使用してダイアログの表示を制御する
次の例は、JavaScript ダイアログ API を使用してダイアログの表示を制御する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Dialog API</title>
</head>
<body>
<dialog id="myDialog">
<p>This is a dialog.</p>
<button id="closeDialog">Close</button>
</dialog>
<button type="button" id="openDialog">Open Dialog</button>
<script>
const btnOpen = document.querySelector('#openDialog');
const btnClose = document.querySelector('#closeDialog');
const dialog = document.querySelector('#myDialog');
btnOpen.addEventListener('click', () => {
dialog.showModal();
});
btnClose.addEventListener('click', () => {
dialog.close();
});
</script>
</body>
</html>Code language: HTML, XML (xml)仕組み。
最初に、id が myDialog の <dialog> 要素を宣言します
<dialog id="myDialog">
<p>This is a dialog.</p>
<button id="closeDialog">Close</button>
</dialog>Code language: HTML, XML (xml)<dialog> 要素の中に、id が closeDialog のボタンがあります。クリックすると、ダイアログが閉じます。
次に、id が openDialog の <button> 要素を宣言します。クリックすると、ダイアログが開きます
<button type="button" id="openDialog">Open Dialog</button>Code language: HTML, XML (xml)3番目に、querySelector() メソッドを使用して、開くボタン、ダイアログ要素、および閉じるボタンを選択します
const btnOpen = document.querySelector('#openDialog');
const dialog = document.querySelector('#myDialog');
const btnClose = document.querySelector('#closeDialog');Code language: JavaScript (javascript)4番目に、開くボタンがクリックされたときに、開くボタンのクリックハンドラー内でダイアログ要素の showModal() メソッドを呼び出すことによって、ダイアログを表示します
btnOpen.addEventListener('click', () => {
dialog.showModal();
});Code language: JavaScript (javascript)5番目に、閉じるボタンがクリックされたときに、閉じるボタンのクリックハンドラー内でダイアログ要素の close() メソッドを呼び出すことによって、ダイアログを閉じます
btnClose.addEventListener('click', () => {
dialog.close();
});Code language: JavaScript (javascript)3) ダイアログ内でのフォームの使用
ダイアログでフォームを使用する場合は、フォームの method 属性を dialog に設定できます。これにより、フォームを送信すると、ダイアログが閉じられます。
ただし、フォームデータはサーバーに送信されません。代わりに、ブラウザに保存されます。同じダイアログを再度開くと、フォームフィールドに保存されたデータが入力されます。
例を次に示します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<title>JavaScript Dialog Form</title>
</head>
<body>
<dialog id="subscribeDialog">
<form method="dialog">
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</p>
<button type="submit" id="btnOk">Subscribe</button>
</form>
</dialog>
<button type="button" id="btnOpenDialog">Open Dialog</button>
<script>
const dialog = document.querySelector('#subscribeDialog');
const btnOpenDialog = document.querySelector('#btnOpenDialog');
btnOpenDialog.addEventListener('click', (event) => {
dialog.showModal();
});
</script>
</body>
</html>Code language: HTML, XML (xml)「ダイアログを開く」ボタンをクリックすると、ダイアログが表示されます。名前とメールを入力し、「購読」ボタンをクリックすると、ダイアログが消えます。
「ダイアログを開く」ボタンをクリックして同じダイアログを再度開くと、名前とメールのフィールドには、以前に入力したデータがまだ入力されていることがわかります。
さらに、ダイアログが表示されると、最初の入力要素 (name) に自動的にフォーカスが当たります。これは、ダイアログがデフォルトで提供する優れたアクセシビリティ機能です。
送信せずにダイアログを閉じたい場合は、送信ボタンに formmethod="dialog" 属性を追加できます。
たとえば、ダイアログ上のフォームにキャンセルボタンを配置し、フォームデータを送信せずにフォームを閉じることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<title>JavaScript Dialog Form</title>
</head>
<body>
<dialog id="subscribeDialog">
<form method="dialog">
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</p>
<button type="submit" id="btnOk">Subscribe</button>
<button type="submit" formmethod="dialog">Cancel</button>
</form>
</dialog>
<button type="button" id="btnOpenDialog">Open Dialog</button>
<script>
const dialog = document.querySelector('#subscribeDialog');
const btnOpenDialog = document.querySelector('#btnOpenDialog');
btnOpenDialog.addEventListener('click', (event) => {
dialog.showModal();
});
</script>
</body>
</html>Code language: HTML, XML (xml)外側をクリックしたときにダイアログを閉じる
ダイアログの外側をクリックしても、ダイアログは閉じられません。閉じるには、ダイアログ要素のクリックイベントをリッスンし、ダイアログの外側をクリックした場合は閉じるように設定できます。
dialog.addEventListener("click", (event) => {
const rect = dialog.getBoundingClientRect()
if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) {
dialog.close()
}
})Code language: JavaScript (javascript)例
概要
- ネイティブ HTML5
<dialog>要素を使用して、モーダルダイアログを作成します。 - ダイアログは、モーダルまたはモードレスにすることができます。モーダルダイアログは、ページの残りの部分との対話を防ぎますが、モードレスダイアログはそうではありません。
- モードレスダイアログを表示するには、
show()メソッドを使用します。 - モーダルダイアログを表示するには、
showModal()メソッドを使用します。 - ダイアログを閉じるには、
close()メソッドを使用します。 - ダイアログ要素は、閉じられると
closeイベントを、たとえば Escape キーを押すことでダイアログがキャンセルされた場合はcancelイベントを発行します。
