<dialog> 任意のタイミングで開くダイアログボックスを作成する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ セクショニング・ルート |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | フロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<dialog>タグの説明
<dialog>
は、任意のタイミングで開くダイアログボックスを作成する祭に使用します。これはユーザーに示すアラート、インスペクター、モーダルウィンドウのような対話的なコンポーネントとして機能します。
<dialog>タグの特徴
- この要素はJavaScriptを使って呼び出します。初期値ではレイアウトに影響を与えません。
- ダイアログを表示する場合、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。ダイアログを閉じる場合はcloseメソッドを使います。
<form>
のmethod
属性にdialog
を指定した場合、ダイアログを閉じる操作が行えます。この時、HTTPリクエストは発生しません。- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<dialog>に指定できる主な属性
- open
- ダイアログが操作可能な状態であることを表します。この属性が指定されていない時は、ダイアログをユーザーに表示すべきではありません。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<dialog>の使い方とサンプル
このタグを使ったマークアップのサンプルです。JavaScriptのClickイベントを使って、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。
HTML
<button type="button" onclick="document.getElementById('dialog_ex1').showModal()">ダイアログを表示</button>
<dialog id="dialog_ex1" aria-labelledby="dialog_ex1_h">
<h3 id="dialog_ex1_h">ダイアログの見出し</h3>
<p>ダイアログの内容。</p>
<button type="button" onclick="this.closest('dialog').close();">閉じる</button>
</dialog>
表示確認
<dialog>に関連するHTMLタグ
オブジェクトやスクリプトを埋め込む要素 | |
---|---|
<img> | 画像を表示する |
<picture> | 特定の画像に対して複数のメディアソースを提供するコンテナを設置する |
<figure> | 写真や図表などの自己完結した要素を表す |
<figcaption> | 参照される写真や図表にキャプションを追加する |
<canvas> | スクリプトで定義したグラフィックスを描画するための領域を配置する |
<audio> | ドキュメント内に音声コンテンツを埋め込む |
<video> | ページ内に動画コンテンツを表示する |
<source> | 再生候補となる動画や音源などのメディアソースを指定する |
<track> | 動画や音声ファイルに字幕やキャプションを追加する |
<embed> | 外部コンテンツを埋め込む |
<object> | 外部リソースのオブジェクトを埋め込む |
<param> | パラメーターを指定する |
<script> | HTMLで実行可能なスクリプトを埋め込む |
<noscript> | スクリプトが動作しない環境での表示内容を指定する |
<meter> | 規定範囲内の数量や測定値を表す |
<progress> | 作業の進捗状況を示すプログレスバーを表示する |
<output> | 計算結果やユーザーアクションの出力欄を作成する |
<dialog> | 任意のタイミングで開くダイアログボックスを作成する |
<template> | ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する |
<slot> | ウェブコンポーネントで独自に扱える枠を提供する |