DEV Community

loading...

Discussion on: Native HTML: Dialog boxes

Collapse
lexlohr profile image
Alex Lohr

I dislike the dialog element a bit, because it is unusable without JS or a reload of the page, unlike details/summary or form validation constraints, so the only advantage over the current solution is that it's a bit more semantic.

As for your script, I would prefer a global event handler so you don't have to re-run it after changes in the page:

document.addEventListener('click', (ev) => {
  let trigger = ev.target;
  let modalId;
  while (trigger && !(modalId = trigger.getAttribute && trigger.getAttribute('data-modal-for'))) {
    trigger = trigger.parentNode;
  }
  if (modalId) {
    const modal = document.getElementById(modalId);
    trigger.hasAttribute('open') && modal.showModal();
    trigger.hasAttribute('close') && modal.close();
  }
});

Collapse
link2twenty profile image
Andrew Bone Author • Edited

I agree that having to rely on JS is a pain, I feel like there should be some native modal-for like functionality.

I always worry having an event fired for every click will have a big impact on performance.

Collapse
lexlohr profile image
Alex Lohr

It's a small trade-off, as far as I'm concerned.

In the worst case, it will traverse the DOM from the clicked element to the html tag for every click and get the attribute in question, which modern browsers can easily do within a few milliseconds even for an html structure that is over 200 nodes deep.

At the same time, you'll save memory for the listeners when you can do it with one of them - and, as I said, it is a good solution to DOM changes that introduce new dialog elements. Also, you can run it even before dom.ready, which adds even more flexibility.

Thread Thread
link2twenty profile image
Andrew Bone Author • Edited

There is an issue on the spec's GitHub, no idea if it will go anywhere but may as well have a look.

Have some way of opening `` elements without JavaScript #3567

keithamus avatar
keithamus commented on Mar 14, 2018

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.

Thread Thread
lexlohr profile image
Alex Lohr

I have added a comment to your proposal.

Thread Thread
link2twenty profile image
Andrew Bone Author

I saw that 😀

Thread Thread
link2twenty profile image
Andrew Bone Author • Edited

Worth noting HTML is not case sensitive so the opensModal attribute would have to be opens-modal