New way to create modals using HTML only

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

Browser support of <dialog> HTML element and ‘open’ attribute of <dialog>

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…