Docs: HTML Dialog Example #3604
Conversation
This adds a Dialog example using the standard HTML dialog.
| hx-swap="outerHTML" | ||
| >Open Modal</button> | ||
|
|
||
| <div id="modal-placeholder"></div> |
There was a problem hiding this comment.
My intuition tells me there should be an easier way to do this, without needing this place holder div. But without, there's nothing to do an "outerHTML" swap with. And without that "outerHTML" swap, the hx-on::after-settle doesn't get called on the dialog. For example, if we have the button target the <body> and do a hx-swap="beforeend", then its the body that gets the hx-on::after-settle event.
I think for Locality-of-behavior reasons, it's best to have the call to showModal on the dialog itself. So that's why I went with this. Happy to entertain other ideas.
|
Would be interesting to have that in the docs. Were you able to solve that client side ESC closing mechanism? As the docs state a modal can be closed via Escape and then HTMX looses control over the state as it's closed client side but not yet replaced. In your example I could produce that behaviour by opening the modal and pressing Escape. I got it working for another use-case by returning |
1. Fix a couple typos 2. Change the dialog to use `closedby="none"`
The HTML spec seems to strongly discourage the use of the It doesn't feel great. The other thing I tried doing was setting an Overall, given the number of caveats we seem to need for this example, I'm not sure I like this. Feels like I'm trying to ice-skate uphill. |
|
After reading the HTML spec a little more closely, the objections it has to using the |
2 participants
This adds a Dialog example using the standard HTML dialog.
Description
I noticed that while there were several examples around how to make modal dialogs, none of them actually used the
<dialog>tag. I was curious if I could actually get htmx to work with the<dialog>tag and after some playing around, I was able to get something that works. I figured it might be good to share what I learned.I'm not entirely sure this is a good idea. The more I learn about html dialogs, the more I'm skeptical about how useful they are. I'm curious what others think.
Testing
Ran the docs locally and verified the intended behavior.
Checklist
masterfor website changes,devforsource changes)
approved via an issue
npm run test) and verified that it succeeded