Alert, Confirm, Prompt Dialog Box in Javascript

Javascript Dialog Box
Alert Dialog Box
Confirmation Dialog Box
Prompt Dialog Box

1. Javascript Dialog Box

Javascript Javascript provides three important Dialog Boxes, which include Alert Dialog Box for users, Confirmation DialogBox, and Prompt Dialog Box.

Note: The dialogs provided by Javascript have a very simple and non-customizable interface. In the actual application, you will probably use a library provided by a third party to get better dialog boxes and more options. However, the default Javascript dialog boxes are still useful in many cases.

In this lesson we are going to discuss each dialog box in turn.

2. Alert Dialog Box

Alert Dialog Box is mainly used to display a notice, warning, or error to users. Basically, you cannot customize dialog box icon or title, ... you can only provide the message that the dialog box will display. In addition, Alert Dialog Box has only one OK button to close a dialog box.

To display a Alert Dialog Box, you call the alert(message) function, in which the message is the content that the dialog box will display.

alert-example.js

<!DOCTYPE html>
<html>
   <head>
      <title>Alert Dialog Box</title>

      <script type="text/javascript">

         function testAlertDialog()  {

              alert("Something Error!");
         }

      </script>

   </head>
   <body>
      <h2>Alert Dialog Box</h2>


      <button onclick="testAlertDialog()">Click me!</button>

   </body>
</html>

3. Confirmation Dialog Box

Confirmation Dialog Box is used to ask the user to confirm something. This dialog is very simple, you cannot customize the icon or the title of the dialog box, you can only provide a message asking the user to confirm. This dialog box has 2 OK and Cancel buttons.

To display a Confirmation Dialog Box you call the confirm(message) function, in which the message is one requesting an user to confirm. If the user clicks the OK button, this function returns true, otherwise if the user clicks the No button, this function returns false.

confirm-example.js

<!DOCTYPE html>
<html>
   <head>
      <title>Confirmation Dialog Box</title>

      <script type="text/javascript">

         function testConfirmDialog()  {

              var result = confirm("Do you want to continue?");

              if(result)  {
                  alert("OK Next lesson!");
              } else {
                  alert("Bye!");
              }
         }

      </script>

   </head>
   <body>
      <h2>Confirmation Dialog Box</h2>


      <button onclick="testConfirmDialog()">Click me!</button>

   </body>
</html>

4. Prompt Dialog Box

Prompt Dialog Box is used for users to enter an information. This dialog box is very simple. It includes a Text Field for users to enter information. The dialog box has 2 OK and Cancel buttons.

To display a Prompt Dialog Box you call the prompt(message, defaultValue) function in which the message is one for user. defaultValue is default value prefilled in the Text Field.

If an user clicks OK, the function returns contents on Text Field, otherwise, if the user clicks Cancel, the function returns null.

prompt-example.js

<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>

      <script type="text/javascript">

         function testPromptDialog()  {

              var result = prompt("Enter you age:", "20");

              if(result != null)  {
                  alert("Your age is " + result);
              }
         }

      </script>

   </head>
   <body>
      <h2>Prompt Dialog Box</h2>


      <button onclick="testPromptDialog()">Click me!</button>

   </body>
</html>