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 namely Alert Box, Confirm Box and Prompt Box.
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:
HTML
<!DOCTYPE html><html><head> <title>Pop-up Box type | Alert Box</title> <style> h1{ color:green; } </style></head><body> <center> <h1>neveropen</h1> <h3>Alert Box</h3> <button onclick="geekAlert()"> Click here for alert box </button> <!-- Alert box function --> <script> function geekAlert() { alert("An Online Computer Science" + "Portal for Geeks"); } </script> </center> </body></html> |
Output:
Before pressing the button:
After pressing the button:
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:
HTML
<!DOCTYPE html><html><head> <title> Pop-up Box type | Prompt Box </title> <style> h1 { color: green; } </style></head><body> <center> <h1>neveropen</h1> <h3>Prompt Box</h3> <input type="button" onclick="geekPrompt();" value="Click here for Prompt box"/> <!-- Prompt box function --> <script> function geekPrompt() { let x = prompt("Enter your mail here : "); document.write("Your ID : " + x); } </script> </center></body></html> |
Output:
Before pressing the button:
After pressing the button:
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:
HTML
<!DOCTYPE html><html><head> <title> Pop-up Box type | Confirm Box </title> <style> h1 { color: green; } </style></head><body> <center> <h1>neveropen</h1> <h3>Confirm Box</h3> <button onclick="geekConfirm()"> Click here for Confirm box </button> <p id="geek"></p> <!-- Confirm box function --> <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:
Before pressing the button:
After pressing the button:
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.
