The dialog element in HTML5

The <dialog> element defines a dialog box or simply a new window; Its appearance and operation is similar to that of a div with a background color; as you can see, it allows you to create modals on a web page without using any plugin in the process; Modals or also known as pop-ups allow users to confirm operations in a simple and much more visual way than the confirm provided in JavaScript.

Below is the table of contents that we are going to discuss to learn how this native modal works in HTML5:

Using the <dialog> element in HTML.
Attributes of the <dialog> element.
Methods of the <dialog> element.
<dialog> element events.
Adding style to the <dialog> element.
Browsers that support the <dialog> element.

Using the dialog element in HTML

dialog is an HTML5 element that allows establishing a new section independently within the body in which it is embedded; To use the dialog element we have to:

<body>
    <section>
        <dialog></dialog>
    </section>
</body>

Although you can place as many nests as you want, or place it as a direct child of the body:

<body>
    <dialog></dialog>
</body>

In short, its use consists of once the HTML has been defined as we did previously, using JavaScript we use the show() or showModal() methods and finally the close() method to hide the dialog again.

<dialog> element attributes

Like all elements in HTML, we can complement them with attributes according to our needs. In the case of the dialog element, it has its own attribute as we see below:

open: If this attribute is set, it specifies that the modal or dialog is active and visible; It also indicates that the user can interact with it.

Example Download

<dialog> element methods: show() vs showModal()

As we mentioned before, the dialog element has three methods, two of them to show the dialog and one of them to hide it as we define below:

show(): This method is used to show the dialog; It has the same behavior if the open attribute is added to the dialog.
showModal(): This method is used to show the dialog; Unlike the first, this method blocks all content except for the dialog by prefixing a transparent window.
close(): This method is used to hide the dialog or modal; It has the same behavior if the open attribute was removed from the dialog.

Example Download

<dialog> element events

The dialog element has a single event that is executed when the dialog is closed:

dialog.addEventListener('close', function() {
//*** to do
});

Styling the <dialog> element

As a last point, we will deal with the issue of styles, which like any other HTML element, we can place all the styles as we like and make our dialog or pop-up window look how we want to override its default appearance by defining rules that alter its position, size, shape , rounding the corners, we can create a header for the title, another container such as body or body for the content, alter the close button and many things that you can think of as you can see in this example:

Example Download

Browsers that support the <dialog> element

A very long time has passed and although the official documentation at w3schools indicates that Firefox supports this feature: W3C in the MDN documentation indicates that no, there is still no support for Firefox as well as no mobile browser so far; to date there is only support for Google Chrome, Safari and Opera.

HTML

Dialog

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy