As HTML continues to evolve, the most used modal which were earlier implemented using JS have now gotten native support of HTML. It is completely game changer, as it now makes it a lot easier to implement Modals and popups without hacking the way into it.
New dialog element also has the support for all the JS methods we will need. Thus it can be completely customized. Let’s explore this more…
Browser Compatibility
Currently, it is supported in all the major browsers. Hence, we can implement immediately in our production sites.
Let’s get the basics down
A dialog/modal, is a popup that appears on a button click. To create it, we have the <dialog> HTML tag. But there is a difference between a dialog and a modal. Dialog is just a simple popup with content that takes up space on the page.
<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>This shows a dialog box.
The open attribute displays the dialog box. Without it, there would be nothing on the screen. This however isn’t a modal but a simple dialog box and doesn’t take the priority over screen.
Dual nature of Dialog
The new dialog in HTML shows dual nature based on how you use it. It can work as a modal, appearing on top of everything and in the center of the page. It can also work as a normal box appearing at the place it is opened at.
To control this functionality, dialog element has different methods to execute its different functionalities. To display it as a dialog we have dialog.show() and to show it as a modal we have dialog.showModal() .
As long as the dialog is open as a modal, all the other UI components become inert. The focus shifts to modal and when pressing tabs, the cursor rotates within the different HTML elements itself.
