Bye Bye Modals, Welcome <dialog> element.

Creating a modal is such a complex thing in the world of frontend. You have to create a container, make sure that it's focus locked, make sure that its above everything else on the page, and it needs to be accessible while making sure that the user can close this whenever they want.

What if I told you browsers already have something like that in its specifications.

The <dialog> element!!!

A lot of the functionality that is required as a part of creating a modal is now embedded inside this <dialog> element. Which means when you use this element, you won’t have to write a lot code.?

In this tutorial video, I am going through the specification and implementing it so that people can understand how easy it is to use it in existing code base.

The video covers everything about the <dialog> element. I hope you liked it. I wanted to create a new channel for all of my frontend experiments and tutorials. So, if you have any suggestions or recommendation, I would love to hear it.

Till Next Time!