Popup boxes (or dialog boxes) are modal windows used to notify or warn the user, or to get input from the user.
Popup boxes prevent the user from accessing other aspects of a program until the popup is closed, so they should not be overused.
There are three different kinds of popup methods used in JavaScript: window.alert(), window.confirm() and window.prompt().
Alert
The alert method displays messages that don’t require the user to enter a response. Once this function is called, an alert dialog box will appear with the specified (optional) message. Users will be required to confirm the message before the alert goes away.
Example:
window.alert("Welcome to our website");
Confirm
The confirm method is similar to window.alert(), but also displays a cancel button in the popup. The buttons return boolean values: true for OK and false for Cancel.
Example:
var result = window.confirm('Are you sure?');
if (result === true) {
window.alert('Okay, if you're sure.');
} else {
window.alert('You seem uncertain.');
}
Prompt
The prompt method is typically used to get text input from the user. This function can take two arguments, both of which are optional: a message to display to the user and a default value to display in the text field.
Example:
var age = prompt('How old are you?', '100');
Other Design Options:
If you are unhappy with the default JavaScript popups, you can substitute in various UI libraries. For example, SweetAlert provides a nice replacement for standard JavaScript modals. You can include it in your HTML via a CDN (content delivery network) and begin use.
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>The syntax is as such: swal(title, subtitle, messageType)
swal("Oops!", "Something went wrong on the page!", "error");The above code will produce the following popup:
SweetAlert is by no means the only substitute for standard modals, but it is clean and easy to implement.