A modal is a popup that when appears on the screen we cannot interact with any other element on the webpage apart from the modal. On other hand a dialog is a popup that when appears on the screen we can still interact with other element on the webpage

<dialog>
<!-- Dialog Content -->
</dialog>

By default a dialog element will be hidden unless you add the open attribute to your dialog

<dialog open>
  <span>You can see me</span>
</dialog>

It is not advised to use the open attribute directly, though, as that only allows you to open a non-modal dialog. Instead, you should use the show() and showModal() JavaScript methods.

const dialog = document.querySelector("dialog")
dialog.show() // Opens a non-modal dialog
dialog.showModal() // Opens a modal

To close a dialog element you just need to use the close() method. Alternatively, if your dialog element is a modal you can use the Esc key to close it.

const dialog = document.querySelector("dialog")
dialog.close() // Closes the dialog