Display Beautiful and Responsive Alert/Confirm/Prompt Dialog Box in JavaScript

In JavaScript, three kinds of dialog boxes are available, Alert box, Confirm box, and Prompt box. These popup boxes are used to show the status message on the browser, based on the action requested by the user. Generally, the alert(), confirm(), prompt() methods are used to display Alert/Confirm/Prompt boxes in JavaScript.

Alert Dialog Box:
The alert() method shows a popup box with a specific message and an “Ok” button.

alert(message)

Confirm Dialog Box:
The confirm() method shows a popup box with a specific message, along with an “Ok” and “Cancel” button.

confirm(message)

Prompt Dialog Box:
The prompt() method shows a popup box with an input field, along with an “Ok” and “Cancel” button.

prompt(text, defaultText)

The browser’s default alert box can be replaced with a beautiful dialog box using the JavaScript plugin. The SweetAlert is an easy-to-use plugin that helps to display beautiful and responsive alert boxes using JavaScript. This tutorial will show you how to display beautiful and responsive Alert, Confirm, and Prompt popup boxes with SweetAlert in JavaScript.

Before getting started, include the SweetAlert JavaScript library.

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

Now, you can use the global swal variable to show an alert dialog.

Showing an Alert

Call the swal() function and pass the message.

swal("Hello CodexWorld!");

Alert Box with Title and Text

Pass two arguments to show a title and text in the alert box, first one will be the title and the second one is the text.

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

Alert Box with Status

Pass status in the third argument to add an icon in an alert box. There are 4 predefined: warning, error, success and info.

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

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

swal Object Options

You can use arguments as options with swal object.

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

Alert Box with Custom Button Text

Use the button option to specify the text of the confirm button.

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

Confirm Dialog Box

The following code snippet shows a confirm popup box.

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 following code snippet shows how to integrate ajax request in the Alert popup box.

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();
  }
});