HTML Code for Creating Dialog Box or Message Box or Modal Dialog Box

HTML Dialog Element
Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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”.

Supported Browsers

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.enabled option, 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.

See the Pen Dialog Element Example by Ankur Sachdeva (@ankur-sachdeva) on CodePen.

Javascript to Open and Close Message box

In the following example, I have used the inline JavaScript code. I have called the show() and close() method of the dialog element within the onclick attribute.

See the Pen oNNgQpj by Ankur Sachdeva (@ankur-sachdeva) on CodePen.

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.

See the Pen poovqKv by Ankur Sachdeva (@ankur-sachdeva) on CodePen.



Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *