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. 😆
oh wow this is cool
Thanks Medea!
we've gone such a long way since bootstrap's 40 lines of code modals 🤣
It is in tailwind now
Thanks for the post; it really sums up the issue from the past and shows how the dialog element is helpful now!
Great post.
Thanks Lymah!
Thanks!
Cool
Good info!
Thanks Scott!
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.