Introduction to Dialog Box
Hello friends, today I am going to explain to you about creating a dialog box. In other words, a message box.
A message box is a way to communicate useful information to the user. Like, displaying an acknowledgment that “Query Form has been successfully submitted”.
In HTML5, you can use the
<dialog> element. This element is supported in the following web browsers:
- Google Chrome from Version 37 or higher
- Firefox from version 53 or higher, but the functionality is behind the
dom.dialog_element.enabledoption, which needs to be set to true. Reference article here.
- Opera from version 24 or higher
- Android Web View from version 37 or higher
- Chrome for Android from version 37 or higher
- Firefox for Android from version 53 or higher
- Opera for Android from version 24 or higher
- Samsung Internet
Note: There is no support for this element in Safari Web Browser.
The <dialog> element
The dialog element can contain any valid HTML source code. Therefore, it can also be styled using CSS.
The dialog box can only have either of two states: Open or Close. A user will only be able to see an Open dialog box. So let’s take a look for a dialog box that is in an open state.
Creating Modal Message Box
A modal dialog box forces a user to interact with it before they can perform any other action in the current application. In windows application, Open File Dialog is a modal dialog box. So, it does not let you perform any other action within that application until you close it or choose the file to open.
In a web application, you can use it to tell the user a transaction is in progress to avoid unnecessary clicking on the Submit button. Usually, in web application they shaded out the background to visually tell the user they are not able to perform anything else. But, in windows application, you may hear a sound and a dialog flashing when you try to perform something else in the application without closing or choosing the appropriate action in the modal dialog box.
It is very easy to create a modal dialog box or convert any dialog box to a modal dialog box. For this, you need to call the showModal() method instead of the show() method. This will convert the dialog box to a modal dialog box. If you want to provide a visual clue to end-user, you can use the ::backdrop CSS pseudo-element.
Enough talking. Let us see creating a modal message box in action.