How To Show Pop Up Boxes Using JavaScript?

Using JavaScript you can create three kinds of pop up boxes, Alert box, Confirm box and prompt box. This tutorial shows how to show pop up boxes such as alert boxes, confirm boxes and prompt boxes with the use of JavaScript code.

Table of Contents

Alert Box

An alert box is used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click on “OK” to process.

Syntax:

Here is a syntax for displaying an alert box in JavaScript. Where “Alert Text” is the text to be displayed while displaying an alert.

alert("Alert Text")

Example:

Following is an example, which shows an alert box with the message “This is an alert box!” while clicking on the button named “Display alert box”.

<script type="text/javascript">
function display_alert(){
alert("This is an alert box!")
}
</script>
<input type="button" onclick="display_alert()" value="Display alert box"/>

Preview:

Confirm box

A confirm box is used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either “OK” or “Cancel” to process. If the user clicks “OK” the box returns true. If the user clicks “Cancel”, the box returns false.

Syntax:

Here is a syntax for displaying a confirm box in JavaScript. Where “Confirm Text” is the text to be displayed as a confirmation message.

confirm{"Confirm Text")

Example:

Following is an example, which shows a confirm box with the message “Press a button” while clicking on the button named “Display confirm box”. It will show the message “You pressed OK!” if you clicked on the OK button. If you click on the “Cancel” button, it will show the message “You pressed Cancel”.

<script type="text/javascript">
 function display_confirm(){
 r=confirm("Press a button");
 if (r===true)
 {
 alert("You pressed OK!");
 }
 else
 alert("You pressed Cancel");
 }
 </script>
 <input type="button" onclick="display_confirm()" value="Display a confirm box"/>

Preview:

Prompt Box

A prompt box is used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click “OK” or “Cancel” to processed entering an input value. If the user clicks “OK” the box returns the input value. If the user clicks “Cancel” the box returns null.

Syntax:

Here is a syntax for displaying a prompt box in JavaScript. Where “some text” is the text to be displayed as a prompt message and “default value” is the default value for the value input box.

prompt{"some text", "default value"}

Example:

Following is an example, which shows a prompt box with the message “Please enter your name” while clicking on the button named “Display prompt box”. It will show the message “Hello Your Name! How are you today?” when you enter your name and click on the ok button.

<script type="text/javascript">
 function display_prompt(){
 name=prompt("Please enter your name", "Your Name");
 if ((name!=null) && name!=" ")
 {
 alert("Hello "+name+"! How are you today?");
 }
 }
 </script>
 </head>
 <input type="button"onclick="display_prompt()" value="Display a prompt box"/>

Preview:

Read Next: How to Loop using JavaScript?

Please follow and like us: