What are the types of Popup box available in JavaScript ?
Last Updated :
15 Dec, 2023
In Javascript, popup boxes are used to display the message or notification to the user.
There are three types of pop-up boxes in JavaScript:
Alert Box
It is used when a warning message is needed to be produced. When the alert box is displayed to the user, the user needs to press ok and proceed.
Syntax:
alert("your Alert here");
Example: This example shows the implementation of the alert box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pop-up Box type | Alert Box</title>
<style>
h1{
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Alert Box</h3>
<button onclick="geekAlert()">
Click here for alert box
</button>
<script>
function geekAlert() {
alert("An Online Computer Science"
+ "Portal for Geeks");
}
</script>
</center>
</body>
</html>
|
Output:
Output
Prompt Box
It is a type of pop up box which is used to get the user input for further use. After entering the required details user have to click ok to proceed next stage else by pressing the cancel button user returns the null value.
Syntax:
prompt("your Prompt here");
Example: This example shows the implementation of the Prompt box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Pop-up Box type | Prompt Box
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Prompt Box</h3>
<input type="button" onclick="geekPrompt();"
value="Click here for Prompt box"/>
<script>
function geekPrompt() {
let x = prompt("Enter your mail here : ");
document.write("Your ID : " + x);
}
</script>
</center>
</body>
</html>
|
Output:
Output
Confirm Box
It is a type of pop-up box that is used to get authorization or permission from the user. The user has to press the ok or cancel button to proceed.
Syntax:
confirm("your query here");
Example: This example shows the implementation of the Confirm box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Pop-up Box type | Confirm Box
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Confirm Box</h3>
<button onclick="geekConfirm()">
Click here for Confirm box
</button>
<p id="geek"></p>
<script>
function geekConfirm() {
var x;
if (confirm("Press a button!") == true) {
x = "OK pressed!";
} else {
x = "Cancel!";
}
document.getElementById("geek").innerHTML = x;
}
</script>
</center>
</body>
</html>
|
Output:
Output
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...