A modal is a pop up that appears on top of the page. A modal, as a pop up, takes the focus away from the current page, and takes priority over the page content.
When the modal does not take focus away from the page, we call it a dialog. In fact, HTML spec provides the dialog tag, as a way we can introduce modal dialogs to our pages.
Again, modal takes focus away from the page, and dialog does not take focus away, although it still does pop up on top of the page. Also, in most cases, with a modal, you can scroll the page behind the modal but the modal itself will not move. While the dialog will move with the page.
We can easily say, a modal is not part of the page, while a dialog, even as a popup, is a part of the page content.
In this tutorial, we will be demonstrating how a modal and a dialog operate.
Now, the way a dialog tag works is that it is always hidden. If you want it to show on the page, you need to include the open attribute
We will use javascript to interact and control the dialog element. Maybe to show what happens when a button is clicked!
In order to show it as a non modal dialog, we just call show() on it, and to close it we just call close() on it.
To show it as a modal, we call showModal() on it. And to close it, we call close() on it.
