Updated June 13, 2023
Introduction to JavaScript Popup Box
In JavaScript, Popup Boxes are used for displaying or showing information to the user. Generally, Popup boxes are of 3 types:
- Alert Box
- Confirm Box
- Prompt Box
How do Popup Boxes work in JavaScript?
The below following are the explanation for the popup boxes in javascript:
1. Alert Box
- An alert box warns the user about actions performed during form filling.
- When an alert box appears user has to click OK to move to the next step.
Syntax:
alert("message");Example: While you are filling online application, it asks you for your date of birth; then you enter your date of birth, but if you enter the wrong date of birth, then it will show a popup Box. That is a warning popup Box. This warning pop is called an “Alert popup box.”
2. Confirm Box
- A confirmation box is used for taking confirmation authentication from the user to move a further step.
- When a prompt box pops up, the user must press “OK” or “Cancel” to proceed.
- When a Confirm box appears user has to choose either OK or Cancel.
- If the user press “OK,” then the action moves to the next step for processing.
- If the user press “Cancel,” the action is canceled, stopping the process there itself (Cancel has a null value by default).
Syntax:
Confirm("Click Yes or No");Example: After filling out the online application form, a popup box will be displayed if you want to proceed with payment. If you wish to proceed with payment, click yes; if not, click no. Clicking yes will take your payment page, and clicking no will takes you to the home page.
3. Prompt Box
- A prompt box is used to ask the user to enter dynamic values.
- After entering the value, click enter to read the value from the user into our code.
Syntax:
prompt("message","user text");Example: In an application form, the user wants to enter his age; he has dynamically entered the value. At this point, we used the prompt popup box to enter user input.
Examples to Implement
The following examples explain how to implement the program in JavaScript Popup Box:
1. Alert Box
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h1>Alert Popup Demo</h1></font>
<script>
var name="PARAMESH";
if (name==="PARAMESH")
{
alert("Login was successful "+name)
}
else
{
alert("Login was unsuccessful "+name)
}
</script>
</body>
</html>Output:
Explanation of the above program: The user name is equal to PARAMESH, alert box popup box gives you the login was successful PARAMESH. The user name does not equal PARAMESH; the alert box popup box gives you the login was unsuccessful.
2. Confirm Box
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h1>Confirm Popup Demo</h1></font>
<script>
function getConfirmAge() {
var voterApply = confirm("Are you wish to apply for voter id?");
var value;
if (voterApply)
value=voterApply;
else
value=voterApply;
document.write("Are you wish to apply for voter id? "+value);
}
getConfirmAge();
</script>
</body>
</html>Output:
After clicking Yes Output:
After clicking No Output:
Explanation of the above code: Once the popup box is displayed, pressing Yes will show the output as Are you wish to apply for voter id? Press No will show the output as Are you wish to apply for voter id? No.
3. Prompt Box
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green"><h1>Prompt Popup Demo</h1></font>
<script>
function getPromptDetails() {
var name = prompt("What is your name?");
var age = prompt("How old are you?");
document.write("My name is : "+name+"<br>");
document.write("My name is : "+age);
}
getPromptDetails();
</script>
</body>
</html>Output:
After entering Input Values Output:
Explanation of the above code: Prompt used for asking input values. After entering your name and age, it will be displayed on the console as My name is: Paramesh, and My age is:24
Conclusion
Popup boxes like alert, prompt, and confirm boxes give the user further step information. Alert Box for the warning, prompt box input values, and confirm Box for the user’s decision.
Recommended Articles
This is a guide to JavaScript Popup Box. Here we discuss the three alert boxes, confirm and prompt Box, with syntax and examples to implement. You can also go through our other related articles to learn more –
