Overview
Dialogs are an integral part of any user interface, be it the web, mobile, or any other that exists today.
Whenever you need any confirmation from the user? You just show the user a dialog with some selectable options. Whenever you want to gather some input from the user? You again present a dialog box with submittable form input.
You can use dialogs by installing JavaScript libraries in your project, and those are available in any kind of framework you are using. Third-party libraries are great, but they do come with an additional overhead to your project that not only adds a certain amount of complexity but also increases the overall bundle size of your app.
On top of this, you are going to install the entire library and yet you are only going to use a certain features of that library. This is not a great in my opinion.
That's where the browser's native <dialog> element comes into play. It's everything you will ever want in a dialog. <dialog> is an underutilized feature of the html. Introduced in HTML5, this element provides a simple and effective way to create model dialogs, such as pop-ups or alerts. In this article, we will explore the <dialog> element in depth, covering its purposes, attributes, and practical examples.
What is the <dialog> element?
<dialog> is an HTML element that represents a dialog box such as alert, confirmation, inspector, or subwindow. It is a part of HTML5 specification, specifically designed for creating modal dialogs. A model dialog is a secondary window that captures user focus, demanding a response before allowing interaction with the main application. Common use cases for <dialog> elements include:
- User Forms: Prompting users to input data, such as login or registration forms.
- Alerts and Confirmation: Displaying messages, warnings, or confirmations.
- Custom UI Elements: Creating custom dialog boxes for various interactions, like settings or help menus.
A very basic <dialog> element would look like so:
<dialog>
It's Dialog this sid.
</dialog>since the <dialog> would not be visible by default, we would need to pass in an open property to make it visible:
<dialog open>
It's Dialog this sid.
</dialog>
Why you should be using the dialog element - LogRocket Blog
Implementing modal popup with native html <dialog> element (sudshekhar.com)
