Alert, Confirm, Prompt Dialog Box in Javascript

View more Tutorials:

1- Javascript Dialog Box

Javascript Javascript provides three important Dialog Boxes, which include  Alert Dialog Box for users, Confirmation Dialog Box, 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>
 

View more Tutorials: