DEV Community

Cover image for Unlocking the Power of HTML's Native Browser Dialog Element

Unlocking the Power of HTML's Native Browser Dialog Element

Nick Taylor on January 23, 2024

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...
Collapse
 
eitanavgil profile image
Eitan

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... 😆

Collapse
 
nickytonline profile image
Nick Taylor

Glad you enjoyed the article! I always have generwting cover images now. 😆

Yes, that's awesome!

Collapse
 
vulcanwm profile image
Medea

oh wow this is cool

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Medea!

Actor Leonardo DiCaprio as Gatsby doing a cheers

Collapse
 
isabensusan profile image
Isa Bensusan

we've gone such a long way since bootstrap's 40 lines of code modals 🤣

Collapse
 
_marcoud profile image
🔸 Marco Antonio

It is in tailwind now

Collapse
 
a0m0rajab profile image
Abdurrahman Rajab

Thanks for the post; it really sums up the issue from the past and shows how the dialog element is helpful now!

Collapse
 
nickytonline profile image
Nick Taylor

Captain America saluting

Collapse
 
lymah profile image
Lymah

Great post.

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Lymah!

BB-8 giving a thumbs up

Collapse
 
fullstackscout profile image
Gary

Thanks!

Collapse
 
nickytonline profile image
Nick Taylor

Croc mascot nodding

Collapse
 
jishnukoottala profile image
jishnu koottala

Cool

Collapse
 
nickytonline profile image
Nick Taylor

Hot Rod saying Cool beans!

Collapse
 
sreno77 profile image
Scott Reno

Good info!

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Scott!

A crab dancing

Collapse
 
cdoremus profile image
Craig Doremus

Nice post Nick, but how can pass the value of the input element in you dialog back to the page?

Collapse
 
cdoremus profile image
Craig Doremus

I think I figured it out: codepen.io/cdoremus/pen/MWxrpKm

Collapse
 
nickytonline profile image
Nick Taylor

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.

Collapse
 
kristianandersen profile image
kristian andersen

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

Collapse
 
nickytonline profile image
Nick Taylor

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.