Hyper-text Markup Language (HTML) lately received some love through the addition of a new element, the
dialog tag. The newest member of the HTML family aims to simplify the process of creating accessible dialog boxes when developing web applications. In this blog post, we'll walk you through how to utilize this element in your upcoming web projects.
dialog element is yet another HTML tag that accepts a single attribute called
open. It can be included in an HTML document as follows:
<dialog open> <!-- Content of the dialog box --> </dialog>
It is important to note that the
open attribute specifies that the dialog box is visible and that the user can interact with it. To hide the dialog box, simply remove the
It is possible to manage the
const dialog = document.querySelector("dialog");
dialog.show(); // Spawn a non-modal dialog box
Additionally, by using the
showModal() method you can instruct the browser to display a modal dialog element. To dismiss the dialog box, the
close() method can be used.
For more information about the newly introduced dialog tag, refer to the following resources:
dialog tag is a versatile and powerful addition to HTML. It has support in every modern browser and as such should be your go-to choice whenever you decide to equip your web app with a non-modal/modal dialog box.