Introduction
HTML 5.2 brought us the dialog element! 🙌
For now, only Chrome implemented it, but other browser vendors will certainly fo...
For further actions, you may consider blocking this person and/or reporting abuse
Very nice post!
I actually don't get it on what the W3C is up to. Years of using propietary MS IE window.showModalDialog, then going into some HTML standars that ended draw back, and now this, a (brand new) implementation for the same purpose.
I remember when browsers stopped the modal functionality because implementations where so bad. What will be the difference now?
I suppose someone figured out how to make this modals modal to their own window parent, so now, there is no problem in having a modal dialog inside your page, if you want to switch to another tab to see another page, now you just can.
I hope this to be a relief for all of us developers, who need some sort of synchronism in our apps, without being forced to rely on 3rd party libraries or no standard behaviours.
Thanks a lot for the post.
These are great news.
Thank you for reading my post 😊
Yes, I do think that the end goal is to set standards for better accessibility.
About this, Jen Simmons wrote:
Nice post! There's also a polyfill: github.com/GoogleChrome/dialog-pol... (shameless self-promotion)
And Firefox has an incomplete implementation behind a flag: bugzilla.mozilla.org/show_bug.cgi?...
Thank you for your comment!😃
I've updated my post to mention your polyfill. But I feel like the biggest “selling point” for using the dialog element is its ease of use. Personally, if I have to install a npm package and then register DOM elements, I would rather create my own modal with CSS or install a npm package like vue/react-modal if I am using a framework.
Sure, but
dialogis only supported in Chrome, so in my opinion it's unreasonable to ship it without a polyfill.I appreciate your argument, but I think it implies that you should always just create your own modal and not use the built-in one :)
Yes, in the current state of adoption, your polyfill is the only way to use the
dialogelement in production.And if a developer uses React or Vue, he/she can easily overcome the polyfill's major limitation (stacking context) by using portals. ✌️
Cool Post!
While I do like the Idea of having a
nativeDialog element, It doesn't always turns to be that good, think of theselectelement for example, it is always a mess to style one in a good way across browsers, that you end up using a third party library that renders a consistentselectelement, even the MDN Docs say so:I think this is one of the reasons the
dialogelement hasn't been rushed to implement.That being said, it is nice to know it could be an alternative in the future.
Thanks for your comment 😃
I think that the issue of styling has been taken into consideration in the design of the dialog element. It is very easy to override the default styles and it even provides a pseudo-element (::backdrop) for customizing the background.
So in the end, it is as easy as styling a div tag, but with the added accessibility benefit.
Thank you so much for this. i was looking for a non css option to create a modal and this is exactly what i needed