All the major browsers now support the <dialog > element. Why add this HTML element? User land code, code that developers write to fill in ga...
For further actions, you may consider blocking this person and/or reporting abuse
Indeed a good addition to the HTML standard, and a nice article. I would also cover on the "closing the dialog" section on the option to close on click outside, which is a common UX behavior. Your cover image made me laugh... I had never had 13 people cheering me when adding a modal to my UI... 😆
Glad you enjoyed the article! I always have generwting cover images now. 😆
Great post.
Thanks Lymah!
oh wow this is cool
Thanks Medea!
Cool
Thanks!
Thanks for the post; it really sums up the issue from the past and shows how the dialog element is helpful now!
Good info!
Thanks Scott!
we've gone such a long way since bootstrap's 40 lines of code modals 🤣
It is in tailwind now
Nice post Nick, but how can pass the value of the input element in you dialog back to the page?
I think I figured it out: codepen.io/cdoremus/pen/MWxrpKm
That’s out of the scope of the blog post, but you can just bind an event to a button in the modal or to the form or if your using a framework, use their way of attaching events.
in your css add
dialog::backdrop {
background: rgba(0, 0, 0,.5);
backdrop-filter: blur(0.5rem);
}
Den you get a blurred slightly darkened background
That's correct. It's an example to show how to blur out the rest of the page aside from the modal which is the focus.