4 ms·

ugh I was so excited to see pure HTML modals were a thing with <dialog> only to find out there's no way of triggering them without JavaScript. Using pure HTML y

by SPBS 3y ago

ugh I was so excited to see pure HTML modals were a thing with <dialog> only to find out there's no way of triggering them without JavaScript. Using pure HTML you can only dismiss them, not trigger them. https://github.com/whatwg/html/issues/3567 https://github.com/whatwg/html/issues/3567 > dialog elements are a great addition and I'm glad they're getting implemented, but a key part of their functionality relies on JavaScript: to open a <dialog> you need to use JavaScript to set the open attribute. > It'd be great if there was a way to make a <a> or a <button> elements capable of opening dialogs. > Precident already exists for page interactivity baked into HTML - for example <a href="#.."> can already scroll the page, and <details> elements are capable of hiding elements behind interactivity, so I think it stands to reason <dialog> elements could be opened by other page elements.

Kiro 3y ago
I don't see the higher purpose of "HTML only" if that means we need to extend HTML with scripting capabilities. In that case I rather just use JavaScript.
- pbhjpbhj 3y ago
  Users might prefer, say, that 99% of the time a data selection widget behaves the same whenever accessed by their browser. When devs choose a JS UI library then that's usually what users get. Wouldn't it be good to have all tables have the same features (sort, collapse, column-select, data export), rather than only having rich features if the dev implemented them, duplicating the effort of millions of other devs. There's a sliding scale here, with html at one end and each page ships a parser and libraries at the other - why have an img tag, just let the page developer implement a JS based interpreter?
contravariant 3y ago
You can show or hide it depending on the current hash. Though admittedly that does require CSS.
aaviator42 3y ago
You can implement modals without JS, with HTML and CSS. For an example, click on '?' in the top right corner here: https://aavi.xyz/proj/colors/ https://aavi.xyz/proj/colors/
- ovao 3y ago
  There are useful tricks to changing CSS properties via checkbox state and pseudo-selectors to implement simple modals (which won’t be accessible), but you can’t open a modal <dialog> element without JS. Weirdly, you can close them with a form submission, but you can’t open them with one.
clairity 3y ago
yah, would be nice if it were baked into html itself, but at least the javascript isn't complicated, and can be put in an `onclick` attribute: <button onclick="document.querySelector('#my-dialog').showModal();">open my dialog</button>

by SPBS 3y ago

Kiro 3y ago

I don't see the higher purpose of "HTML only" if that means we need to extend HTML with scripting capabilities. In that case I rather just use JavaScript.

pbhjpbhj 3y ago
Users might prefer, say, that 99% of the time a data selection widget behaves the same whenever accessed by their browser. When devs choose a JS UI library then that's usually what users get. Wouldn't it be good to have all tables have the same features (sort, collapse, column-select, data export), rather than only having rich features if the dev implemented them, duplicating the effort of millions of other devs. There's a sliding scale here, with html at one end and each page ships a parser and libraries at the other - why have an img tag, just let the page developer implement a JS based interpreter?

contravariant 3y ago

You can show or hide it depending on the current hash. Though admittedly that does require CSS.

aaviator42 3y ago

You can implement modals without JS, with HTML and CSS. For an example, click on '?' in the top right corner here: https://aavi.xyz/proj/colors/ https://aavi.xyz/proj/colors/

ovao 3y ago
There are useful tricks to changing CSS properties via checkbox state and pseudo-selectors to implement simple modals (which won’t be accessible), but you can’t open a modal <dialog> element without JS. Weirdly, you can close them with a form submission, but you can’t open them with one.

clairity 3y ago

yah, would be nice if it were baked into html itself, but at least the javascript isn't complicated, and can be put in an `onclick` attribute: <button onclick="document.querySelector('#my-dialog').showModal();">open my dialog</button>