Follow Us

JavaScript DialogBoxes

Dialog Boxes:


These dialog boxes appear, as Separate window and their content depends on the information provided by the user. This content is independent of the text in the HTML page containing the javascript script and does not affect the content of the page in any Way.

Three types of dialog boxes provided by javascript are: 

1. Alert dialog box
2. prompt dialog box
3. Confirm dialog box. 

1.The Alert Dialog Box :

  1. This is the simplest of all and is used to display a small amount of text to the user. the javascript alert( ) method takes a string as an argument and displays an alert dialog box in the browser window when invoked by JavaScript code.
  2. The alert dialog box displays the string passed to the alert( ) method as a message, as well as an OK button. The JavaScript and the HTML program, in which this code snippet is held, will not continue processing until the 0k button is clicked(that is until dismissed).
  3. The alert dialog box can be used to display a cautionary message or display some information.
  4. A message is displayed to the user when incorrect information is keyed in a form like an invalid password.An invalid result is the Output of a calculation.
  5. A warning that a service is not available on a given date/time.


as in:
alert("ClIck OK to continue”) 


To display the user the sum of two numbers.

FIle Name : AlertDemo.html 

var x= 10;
var y =20.50;
alert("Sum is" +(x + y));
document.writeln(x + y);  //this statement is not printed uztil alert dialogbox dismissed

2. Prompt Dialog Box :

  1. As seen in the previous program, the alert dialog box simply displays information in a browser and does not allow any interaction with the user. 
  2. With prompt dialog box user can enter some data that can be read into a program(like scanf function).
  3. The prompt dialog box displays a specified message. In addition, the prompt dialog box also provides a single data entry text box in which the user can enter some data.  

The prompt dialog box displays the following.

  1. Displays a predefined Message.
  2. Displays a text box for user input.
  3. Displays an OK & Cancel push buttons.
  4. The prompt dialog bo also causes program execution to halt until user action takes place(modal dialog box).
  5. This could be the OK button being clicked, or the CANCEL button is clicked, which causes the following action to take place.
  6. Clicking on the OK button causes the text typed inside the textbox to be passed to the program environment (i.e JavaScrip).
  7. Clicking on the CANCEL button causes a NULL value to be passed to the environment. When the prompt( ) method is used a instantiate and use a dialog box the method requires two blocks of information.
  8. A message to be displayed as a prompt to the User.
  9. Any message to be displayed in the textbox. by default(this is optional)


prompt"Message" “Default value”);
as in
prompt(” Enter your favorite color”, "Blue");
A default value, Blue, is displayed by default in the text box which user can change if he wants. The value that user keys into the textbox on the prompt dialog box is accepted and can be stored variable.


To access two numbers from the user and displays their product.

File Name : PromptDemo.HTML
var fn = prompt("Enter first number" ,"10");
var sn = prompt("Enter second number","2O.5");

Confirm Dialog Box:
JavaScript Provides a third type of a dialog box, called the confirm dialog box. As the name indicates, this dialog box serves as a technique for confirming user action. 

The confirm dialog box displays the following information:

  1. A pre-defined message
  2. OK & Cancel button.
  3. The confirm dialog box does not allow any user activities until the dialog box is dismissed(modal).
  4. Clicking on the OK button causes TRUE to be passed to the program that called the confirm dialog box.
  5.  Clicking on the CANCEL button causes FALSE to be passed to the program that called the confirm dialog box.


as in
confirm("Are you sure of your order?");


To display a message if user confirms.
File Name: ConfirmDemo.html
var qty = prompt("How many Reliance shares you would like purchase","200");
if(confirm("Are you sure, shall I place order with Stock exchange?")); 
document.writeln("Your order of" +qty+ "shares is confirmed");


Recent Posts