The Standard Modal

This is the standard popup modal created with HTML, CSS, and JavaScript. Close the modal to access the page.

The Modal with the <dialog> element

The Dialog Popup

This is the dialog popup created with the HTML dialog element. You can access the page even if the dialog is open.

The Modal Popup

This is the modal popup created with the HTML dialog element. Close the modal to access the page.

The HTML <dialog> element allows us to easily create a modal or dialog. The modal and the dialog are popups that appear on top of the current page. The biggest difference between these two elements is that when the modal is open you cannot do anything on the current page except scroll. All other interaction is blocked until you close the modal. On the other hand, when the dialog is open you can still interact with the current page. To open the dialog and modal we can use the show() and showModal() JavaScript methods. To close the dialog and modal we can use the close() JavaScript method.