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");

MDN Alert Example

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.');
}
MDN Confirm Example

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');

MDN Prompt Example

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 Example

SweetAlert is by no means the only substitute for standard modals, but it is clean and easy to implement.

More Information: