From fa5822f54b8daf3955eb5c0a8815a0c96abea3f0 Mon Sep 17 00:00:00 2001 From: Leevi Graham Date: Sat, 22 Nov 2025 21:44:50 +1100 Subject: [PATCH 1/4] Add close / cancel button Example was missing cancel button. Added a close button matching the /en-US/docs/Web/API/HTMLDialogElement/close example --- files/en-us/web/api/htmldialogelement/show/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/htmldialogelement/show/index.md b/files/en-us/web/api/htmldialogelement/show/index.md index 239d05625095a40..d29c486557e9de8 100644 --- a/files/en-us/web/api/htmldialogelement/show/index.md +++ b/files/en-us/web/api/htmldialogelement/show/index.md @@ -43,6 +43,7 @@ button.
+

@@ -70,7 +71,7 @@ button. ```js const updateButton = document.getElementById("updateDetails"); -const cancelButton = document.getElementById("cancel"); +const closeButton = document.getElementById("close"); const dialog = document.getElementById("favDialog"); dialog.returnValue = "favAnimal"; @@ -89,7 +90,7 @@ updateButton.addEventListener("click", () => { }); // Form cancel button closes the dialog box -cancelButton.addEventListener("click", () => { +closeButton.addEventListener("click", () => { dialog.close("animalNotChosen"); openCheck(dialog); }); From 77ec0fb7da98b4f55de4d3c6d06589d853f7eb60 Mon Sep 17 00:00:00 2001 From: Leevi Graham Date: Tue, 25 Nov 2025 09:03:41 +1100 Subject: [PATCH 2/4] Update index.md --- files/en-us/web/api/htmldialogelement/show/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/htmldialogelement/show/index.md b/files/en-us/web/api/htmldialogelement/show/index.md index d29c486557e9de8..f7d4da53858127a 100644 --- a/files/en-us/web/api/htmldialogelement/show/index.md +++ b/files/en-us/web/api/htmldialogelement/show/index.md @@ -43,7 +43,7 @@ button.

- +

@@ -71,7 +71,7 @@ button. ```js const updateButton = document.getElementById("updateDetails"); -const closeButton = document.getElementById("close"); +const cancelButton = document.getElementById("cancel"); const dialog = document.getElementById("favDialog"); dialog.returnValue = "favAnimal"; From cf078a8532b3a3323f441bcea7b90b98d3fc48e0 Mon Sep 17 00:00:00 2001 From: Leevi Graham Date: Tue, 25 Nov 2025 09:04:51 +1100 Subject: [PATCH 3/4] Update index.md --- files/en-us/web/api/htmldialogelement/show/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/htmldialogelement/show/index.md b/files/en-us/web/api/htmldialogelement/show/index.md index f7d4da53858127a..47a4dfe9e4f411f 100644 --- a/files/en-us/web/api/htmldialogelement/show/index.md +++ b/files/en-us/web/api/htmldialogelement/show/index.md @@ -90,7 +90,7 @@ updateButton.addEventListener("click", () => { }); // Form cancel button closes the dialog box -closeButton.addEventListener("click", () => { +cancelButton.addEventListener("click", () => { dialog.close("animalNotChosen"); openCheck(dialog); }); From 885798f3e715cbe73e3c52943090ca4dccf01c6a Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 25 Nov 2025 09:31:42 +1100 Subject: [PATCH 4/4] Update to current api conventions with live exmaple --- .../web/api/htmldialogelement/show/index.md | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/api/htmldialogelement/show/index.md b/files/en-us/web/api/htmldialogelement/show/index.md index 47a4dfe9e4f411f..457861539ed8423 100644 --- a/files/en-us/web/api/htmldialogelement/show/index.md +++ b/files/en-us/web/api/htmldialogelement/show/index.md @@ -8,9 +8,7 @@ browser-compat: api.HTMLDialogElement.show {{ APIRef("HTML DOM") }} -The **`show()`** method of the {{domxref("HTMLDialogElement")}} -interface displays the dialog modelessly, i.e., still allowing interaction with content -outside of the dialog. +The **`show()`** method of the {{domxref("HTMLDialogElement")}} interface displays the dialog modelessly, i.e., still allowing interaction with content outside of the dialog. ## Syntax @@ -33,17 +31,18 @@ None ({{jsxref("undefined")}}). ## Examples -The following example shows a simple button that, when clicked, opens a -{{htmlelement("dialog")}} containing a form via the `show()` method. From -there you can click the _Cancel_ button to close the dialog (via the -{{domxref("HTMLDialogElement.close()")}} method), or submit the form via the submit -button. +### Basic usage + +The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the `show()` method. +From there you can click the _Cancel_ button ("X") to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} method), or submit the form via the submit button. + +#### HTML ```html

- +

@@ -69,6 +68,8 @@ button. ``` +#### JavaScript + ```js const updateButton = document.getElementById("updateDetails"); const cancelButton = document.getElementById("cancel"); @@ -79,7 +80,7 @@ function openCheck(dialog) { if (dialog.open) { console.log("Dialog open"); } else { - console.log("Dialog closed"); + console.log("Dialog cancelled"); } } @@ -96,6 +97,10 @@ cancelButton.addEventListener("click", () => { }); ``` +#### Results + +{{EmbedLiveSample("Basic usage",100, 200)}} + ## Specifications {{Specifications}}