Dialog boxes are available in JavaScript in three different forms: alert and confirmation boxes as well as a prompt box. Depending on the user’s request, these pop-up boxes display the browser’s current status. When it comes to displaying Alert/Confirm/Prompt boxes, JavaScript generally uses the methods alert(), confirm() and prompt().

Dialog Box Alert:

An “Ok” button is displayed in the alert() method’s popup box.

alert(message)

Dialog Box:

Using the confirm() method will display a popup box with a specific message and buttons for “Ok” and “Cancel”.

confirm(message)

Prompt Dialog Box:

It displays a popup box with an input field, as well as a “Ok” and “Cancel” button, when using the prompt() method.

prompt(text, defaultText)

With JavaScript, the browser’s default alert box can be replaced with a beautiful dialogue box. A simple JavaScript plugin, SweetAlert makes it easy to create beautiful and responsive alert boxes. How to use SweetAlert to create beautiful and responsive Alert, Confirmation or Prompt popup boxes in JavaScript is demonstrated in this tutorial.

In order to get started, make sure you have the SweetAlert JavaScript library installed.

<script src="sweetalert.min.js"></script>

Use the global swal variable to display an alert dialog.

Showing an Alert

Call swal() and pass the message.

swal("Hello CodexWorld!");

Alert Box in Title and Text

To display a title and text in the alert box, pass two arguments: the first will be the title, and the second will be the text.

swal("Here's the title!", "...and here's the text!");

Box Status Alerts

To add an icon to an alert box, pass status as the third argument. Warning, error, success, and information are the four default options.

swal("Operation success!", "You clicked the button!", "success");

swal("Operation failed!", "You clicked the button!", "error");

swal Object Options

With the swal object, parameters can be used as options.

swal({
title: "Hello CodexWorld!",
text: "You clicked the button!",
icon: "success",
});

Alert Box with Custom Button Text

The confirm button’s text can be specified using the button option.

swal({
title: "Operation success!",
text: "You clicked the button!",
icon: "success",
button: "Aww yiss!",
});

Dialog Box for Confirmation
A confirmation popup box is shown in the following code snippet.

swal({
title: "Are you sure?",
text: "Once deleted, this operation can't be reverted!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Done! Your file has been deleted!", {
icon: "success",
});
} else {
swal("Delete operation is cancelled!");
}
});

Alert Dialog with Ajax Request

The code snippet below demonstrates how to include an ajax request in the Alert popup window.

swal({
text: 'Search for a movie. e.g. "La La Land".',
content: "input",
button: {
text: "Search!",
closeModal: false,
},
})
.then(name => {
if (!name) throw null;

return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
return results.json();
})
.then(json => {
const movie = json.results[0];

if (!movie) {
return swal("No movie was found!");
}

const name = movie.trackName;
const imageURL = movie.artworkUrl100;

swal({
title: "Top result:",
text: name,
icon: imageURL,
});
})
.catch(err => {
if (err) {
swal("Oh noes!", "The AJAX request failed!", "error");
} else {
swal.stopLoading();
swal.close();
}
});