仕様

DIALOG要素は、
ユーザーがタスクを
実行する為に操作する
アプリケーションの
一部を表します。

dialogダイアログ (dialog)
カテゴリ
  • フローコンテンツ
  • セクショニング・ルート
種類通常要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		フローコンテンツ。
属性グローバル属性,
open
ダイアログボックスが表示されているかどうか
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		alertdialog.
[既定値 : dialog]
DOM
インター
フェイス
HTMLDialogElement
  1. [Exposed=Window]
  2. interface HTMLDivElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute boolean open;
  6. attribute DOMString returnValue;
  7. [CEReactions] undefined show();
  8. [CEReactions] undefined showModal();
  9. [CEReactions] undefined close(optional DOMString returnValue);
  10. };
レンダリング
フローコンテンツ
  1. dialog {
  2. display: block;
  3. position: absolute;
  4. inset-inline-start: 0;
  5. inset-inline-end: 0;
  6. width: fit-content;
  7. height: fit-content;
  8. margin: auto;
  9. border: solid;
  10. padding: 1em;
  11. background: white;
  12. color: black;
  13. }
  14. dialog:not([open]) {
  15. display: none;
  16. }
  17. dialog::backdrop {
  18. background: rgba(0,0,0,0.1);
  19. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 要素は文書の通常のフローから除外され、直近の配置されている祖先の要素に対して相対配置されます。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
dialog要素は、ユーザーがタスクを実行する為に操作するアプリケーションの一部を表します。

dialog要素は、ダイアログボックス、インスペクター、ウィンドウなど、ユーザーがタスクを実行する為に操作するアプリケーションの一部を表します。

  1. <dialog id="idiJs8101">ダイアログ
  2. <form method="dialog">
  3. <button>閉じる</button>
  4. </form>
  5. </dialog>
  6. ダイアログ<button id="ibtJs8101">開く</button>
  1. document.addEventListener("DOMContentLoaded", function() {
  2. var leHtmlOpenButton = document.getElementById('ibtJs8101');
  3. var leHtmlDialog = document.getElementById('idiJs8101');
  4. leHtmlOpenButton.addEventListener('click', function onOpen() {
  5. if (typeof leHtmlDialog.showModal === "function") {
  6. leHtmlDialog.showModal();
  7. } else {
  8. alert("The <dialog> API is not supported by this browser");
  9. }
  10. });
  11. });
ダイアログ
ダイアログ
参照元
  1. HTML Living Standard. 4.11.4 The dialog element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML 5.2 W3C 勧告. 4.11.4 The dialog element
  4. MDN Web Docs. HTML <dialog>: ダイアログ要素

使用可能な箇所

フローコンテンツを
受け入れる要素に
配置できます。

dialog要素は、フローコンテンツを受け入れる要素に配置できます。

  1. <div>
  2. <dialog id="idiJs8201">ダイアログ
  3. <form method="dialog">
  4. <button>閉じる</button>
  5. </form>
  6. </dialog>
  7. ダイアログ<button id="ibtJs8201">開く</button>
  8. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、dialog要素を配置できます。
(スクリプトは、先の「仕様」の処で書いてあるのと同等の処理です。)

ダイアログ
ダイアログ

配置できるコンテンツ

フローコンテンツを
配置できます。

dialog要素は、フローコンテンツを配置できます。

  1. <dialog id="idiJs8301">ダイアログ
  2. <form method="dialog">
  3. <button>閉じる</button>
  4. </form>
  5. </dialog>
  6. ダイアログ<button id="ibtJs8301">開く</button>

dialog要素のコンテンツの一部として、フローコンテンツである form要素を配置できます。

ダイアログ
ダイアログ

属性

open属性

  1. <dialog id="idiJs8401" >ダイアログ
  2. <form method="dialog">
  3. <button>閉じる</button>
  4. </form>
  5. </dialog>
  6. ダイアログ<button id="ibtJs8401">開く</button>

open属性は、ダイアログボックスが表示されているかどうかを示す論理属性です。指定すると、ダイアログ要素がアクティブであり、ユーザーがダイアログ要素を操作できることを示します。

ダイアログ
ダイアログ

気を付ける点