The dialog element is used similar as a div but with a specific purpose. Popping up on the user's screen and closing. The reason people prefers this is because it is much easier to use and requires less code than alternative options. Then some people would probably ask...
From my experience, both are similar but very different. div popups requires you to setup style tags for it to have the popup's essentials. A shadow when display and the popup centering on screen. The dialog element in the other hand, acts as a div but also has the essentials of a popup modal in the meantime. You do not necessarly need to style the dialog.
In HTML you simply use dialog like a div. Typing it like this; <dialog>, </dialog>. Don't forget to add an open button and close button for the dialog to open and close!
<button id='open'>open</button>
<dialog>
<h1>This is a dialog!</h1>
<button id='close'>close</button>
<p>Put some content here</p>
</dialog>In JS we should be making the buttons to work, so that the dialog element opens and closes. Just like the below.
open.addEventListener('click', function () {
/*
Apperently there are alternatives to do the same thing; opening the dialog.
Here are the recommended to use:
.show()
.showModal()
*/
dialogModal.showModal();
});
close.addEventListener('click', function () {
dialogModal.close();
});The dialog element is surprisingly compatible with all browsers except Interent Explorer. Both .showModal and .close code are compatible with the same browsers mentioned right before.
Here's a visual example I found from MDN web docs.
