From d6bf76e337a3dd5fef2a410c5e510a474f1c3bc7 Mon Sep 17 00:00:00 2001 From: Kurtis Nusbaum Date: Thu, 25 Dec 2025 13:59:58 -0800 Subject: [PATCH 1/3] HTML Dialog Example This adds a Dialog example using the standard HTML dialog. --- www/content/examples/_index.md | 1 + www/content/examples/modal-dialog.md | 88 ++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 www/content/examples/modal-dialog.md diff --git a/www/content/examples/_index.md b/www/content/examples/_index.md index bc98a29bd..97e57954d 100644 --- a/www/content/examples/_index.md +++ b/www/content/examples/_index.md @@ -34,6 +34,7 @@ You can copy and paste them and then adjust them for your needs. | [Dialogs - Browser](@/examples/dialogs.md) | Demonstrates the prompt and confirm dialogs | | [Dialogs - UIKit](@/examples/modal-uikit.md) | Demonstrates modal dialogs using UIKit | | [Dialogs - Bootstrap](@/examples/modal-bootstrap.md) | Demonstrates modal dialogs using Bootstrap | +| [Dialogs - Dialog Tag](@/examples/modal-dialog.md) | Demonstrates modal dialogs using html dialogs | | [Dialogs - Custom](@/examples/modal-custom.md) | Demonstrates modal dialogs from scratch | | [Tabs (Using HATEOAS)](@/examples/tabs-hateoas.md) | Demonstrates how to display and select tabs using HATEOAS principles | | [Tabs (Using JavaScript)](@/examples/tabs-javascript.md) | Demonstrates how to display and select tabs using JavaScript | diff --git a/www/content/examples/modal-dialog.md b/www/content/examples/modal-dialog.md new file mode 100644 index 000000000..ca7696cbf --- /dev/null +++ b/www/content/examples/modal-dialog.md @@ -0,0 +1,88 @@ ++++ +title = "Modal Dialogs with HTML Dialogs" +template = "demo.html" ++++ + +Since 2022 the HTML spec has included a `` tag and it works well with +htmx. Consider the following html: + +```html +` + + +``` + +This button sends a `GET` request to `/modal` when the button is clicked. The +server then responds with with a dialog that get swapped into an empty `
`. +The `` looks like this: + +```html + +

Modal Dialog

+ This is the modal content. You can put anything here, like text, + or a form, or an image. +
+
+ +` +``` + +Note the use of `hx-on::after-settle`. This is needed because in order for the dialog to actually be shown, +the `showModal` function must be called. + +The close button fetches an empty `div` via the `/close` route to replace the dialog when it's closed: + +```html + +``` + +This essentially "resets" the page, and clicking the button again will open a new dialog. + +{{ demoenv() }} + + + + + + From 3f43f900e6ce007954dbe32b65e32e43652ffbf9 Mon Sep 17 00:00:00 2001 From: Kurtis Nusbaum Date: Mon, 5 Jan 2026 20:02:19 -0800 Subject: [PATCH 2/3] Small fixups 1. Fix a couple typos 2. Change the dialog to use `closedby="none"` --- www/content/examples/modal-dialog.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/www/content/examples/modal-dialog.md b/www/content/examples/modal-dialog.md index ca7696cbf..721dc45e8 100644 --- a/www/content/examples/modal-dialog.md +++ b/www/content/examples/modal-dialog.md @@ -22,7 +22,7 @@ server then responds with with a dialog that get swapped into an empty `
`. The `` looks like this: ```html - +

Modal Dialog

This is the modal content. You can put anything here, like text, or a form, or an image. @@ -32,9 +32,6 @@ The `` looks like this: ` ``` -Note the use of `hx-on::after-settle`. This is needed because in order for the dialog to actually be shown, -the `showModal` function must be called. - The close button fetches an empty `div` via the `/close` route to replace the dialog when it's closed: ```html @@ -43,6 +40,12 @@ The close button fetches an empty `div` via the `/close` route to replace the di This essentially "resets" the page, and clicking the button again will open a new dialog. +Note that in the dialog: +1. We use `hx-on::after-settle`. This is needed because in order for the dialog to actually be shown, +the `showModal` function must be called. +2. The `closedby` attribute is set to `none`. If we didn't have this, the user might close the dialog, +via some mechanism that doesn't trigger the fetch of the `/close` endpoint. + {{ demoenv() }} @@ -72,7 +75,7 @@ dialog { `}) onGet("/modal", function(request, params){ - return ` + return `

Modal Dialog

This is the modal content. You can put anything here, like text, or a form, or an image. From 4625e4326d1725d4546835b01cf19a2d24649aaf Mon Sep 17 00:00:00 2001 From: Kurtis Nusbaum Date: Mon, 5 Jan 2026 20:04:29 -0800 Subject: [PATCH 3/3] Actual typo fixups --- www/content/examples/modal-dialog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/content/examples/modal-dialog.md b/www/content/examples/modal-dialog.md index 721dc45e8..367ddf743 100644 --- a/www/content/examples/modal-dialog.md +++ b/www/content/examples/modal-dialog.md @@ -7,7 +7,7 @@ Since 2022 the HTML spec has included a `` tag and it works well with htmx. Consider the following html: ```html -`