4 ms·
The <dialog> element says "This is a modal dialog displayed using just HTML." but that's a bit misleading because the dialog opens using JavaScript `document.ge
by hn_acker 2y ago
The <dialog> element says "This is a modal dialog displayed using just HTML." but that's a bit misleading because the dialog opens using JavaScript `document.getElementById('my-dialog').showModal()` in the onclick attribute of the relevant button.
- worble 2y agoWhich is strange because you absolutely can open dialogs without javascript with the popover attribute https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage https://developer.mozilla.org/en-US/docs/Web/API/Popover_API...
- robertoandred 2y agoThe Popover API only makes non-modal popups.
- worble 2y agoYes, but in the article I posted: > Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a <dialog> element is the right way to go. > You can turn a <dialog> element into a popover (<dialog popover> is perfectly valid) if you want to combine popover control with dialog semantics.
- robertoandred 2y agoBut it's still a non-modal dialog, which doesn't match the JavaScript functionality.
- worble 2y agoApologies, for some reason I was convinced you could get a proper modal using the popover api but you're right, it's not a proper modal.
- rat9988 2y agoFunny, when reading this sentence, it felt like an LLM that was hallucinating and apologizes when told.
- mock-possum 2y agoI wouldn’t expect an LLM to use a phrase like “for some reason I was convinced,”
- sigzero 2y agoCorrect, it is only modal if JavaScript is used.
- idoubtit 2y agoNo, a <dialog> element will be displayed at page load if it has the "open" attribute. There is no need for JS. The usual handling is with the JS API, but it's possible to handle it with CSS only. For instance, display the modal window only if a checkbox is checked.