JavaScript provides a variety of pop-up boxes to alert, alert, or retrieve user input. Pop-up boxes prevent the user from accessing some features of the program until a popup is closed, so they should not be overused. There are three different types of popup methods used in JavaScript – Alert Box, Confirm Box, Prompt Box
1. Alert Box: A warning (Alert) dialog box is most commonly used to alert or alert a user by displaying specific messages in a small chatbox.
Example: Below example is illustrating the use of Alert Box:
<!DOCTYPE html> <html> <head> <script>
function showAlert() {
alert("Displaying an Alert box");
}
</script>
</head> <body> <button onclick="showAlert()">
Display Alert Box
</button>
</body> </html> |
Output:
Fig 1.1 Alert Box
2. Confirm Box: A verification (Confirm) box is used to allow the user to make a choice. When Javascript displays a checkbox, the user will need to click “OK” or “Cancel” to proceed to the next step. When a user clicks the OK button the variable result will get the true value and when the user clicks the Cancel different result you will get the false value. Also, based on what the user clicks, we can perform different actions. We can explain this action with a conditional mind.
Example: Below example is illustrating the use of Confirm Box:
<!DOCTYPE html> <html> <head> <script type="text/javascript">
function isConfirmed() {
let conVal =
confirm("Are you ready to confirm?");
if (conVal == true) {
document.getElementById("result")
.innerHTML = "Confirmed !";
} else {
document.getElementById("result")
.innerHTML = "Cancelled !";
}
}
</script>
</head> <body> <form>
<input type="button" onclick="isConfirmed()" value="Confirmation check" />
</form>
<p id="result"></p>
</body> </html> |
Output:
Fig 1.2 Confirm Box
3. Prompt Box: The JS Prompt Box can be used to retrieve user input. When JS displays an inbox, the user will see a popup box with an input location and the “OK” or “Cancel” buttons to continue after entering the input value.
Example: Below example is illustrating the use of Prompt Box:
<!DOCTYPE html> <html> <head> <script type="text/javascript">
function promptUser() {
let userInput =
prompt("Hi Dude, What is your name?",
"John Wick");
if (userInput != null) {
document.getElementById("result").
innerHTML = "Hello " + userInput +
",Thanks for Contributing to GFG";
}
}
</script>
</head> <body> <button onclick="promptUser()">
Click here for prompt</button>
<p id="result"></p>
</body> </html> |
Output:
Fig 1.3 Prompt Box
Uses of Popup Box:
- The JavaScript alert box can be used to display any error message and any help message. For example, if you perform a form field verification, and you find a certain amount of location incorrectly, you can display a warning box with a user notification message about incorrect input.
- JavaScript verification box is a good way to verify any important user action such as if we have a feature in our web application when we click a button, we make an AJAX call to the server to delete certain data from the site, in which case, it is better to confirm once the button is clicked a second chance to confirm or cancel the request if it was made in error. So, for important actions, we should use a confirmation popup box.
- The JavaScript Prompt box can be used to create a system-like menu where based on user input various actions are performed using a JavaScript conversion statement.