JavaScript Dialog Boxes


Three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users.

  • Alert Dialog Box
  • Confirmation Dialog Box
  • Prompt Dialog Box

Alert Dialog Box

An alert dialog box is mostly used to give a warning message to the users.

Example

<script type="text/javascript">
 function alert_box() {
   alert("I am Alert Dialog Box");
   }
</script>

<input type="button" onClick="alert_box()" value="Alert Dialog Box" />
Output

Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons:OK and Cancel.

Example

<script type="text/javascript">
 function confirm_box() {
  var retVal = confirm("Do you want to continue ?");
   if( retVal == true ){
      alert("User wants to continue!");
	  return true;
   }else{
      alert("User does not want to continue!");
	  return false;
   }
   }
</script>

<input type="button" onClick="confirm_box()" value="Alert Dialog Box" />
Output

Prompt Dialog Box

The prompt dialog box is very useful when you want to pop-up a text box to get user input.

This dialog box with two buttons: OK and Cancel. If the user clicks on OK button the window method prompt() will return entered value from the text box. If the user clicks on the Cancel button the window method prompt() returns null.

Example

<span id="view"></span>

<script type="text/javascript">
 function prompt_box() {
  var val = prompt("Enter your name : ", "your name here");
  document.getElementById("view").innerHTML = "You have entered = " + val + "";
   }
</script>

<input type="button" onClick="prompt_box()" value="Prompt Dialog Box" />
Output


Share this article on