There are three types of dialogue boxes in JavaScript: alert boxes, confirm boxes, and prompt boxes. Such flash windows are being used to display the push notification on the screen dependent on the user's behaviour. In JavaScript, the  confirm(), alert(), and prompt() functions are commonly used to show Confirm/Alert/Prompt boxes.

 

Alert Dialog Box:

The alert() function displays a popup window containing a message and a "Ok" button.

alert(message)

 

Confirm Dialog Box:

The confirm() function displays a popup window with a message, as well as a "Ok" and "Cancel" button.

confirm(message)

 

Prompt Dialog Box:

The prompt() function displays a popup window with an input box and buttons for "Ok" and "Cancel."

prompt(text, defaultText)

Using the JavaScript plugin, you may replace the browser's default alert box with a stunning dialogue box. SweetAlert is a simple plugin that allows you to show attractive and dynamic alert windows using JavaScript. This article will teach you how to use SweetAlert in JavaScript to show gorgeous and fast Confirm, Alert, and Prompt popup windows.

 

Also include SweetAlert JavaScript library before you begin.

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

You may now utilise the worldwide swal variable to display an alert dialogue.

 

Showing an Alert

 

Call the swal() function and pass the message.

swal("Hello Themesgiant!");

 

Alert Box with Title and Text

Pass two parameters to display a header and message in the alert box; the first is the title, and the second is the text.
 

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

 

Alert Box with Status

To insert a symbol in an alert box, pass status as the third argument. There are four predefined options: warning, error, success, and information.

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

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

 

swal Object Options

 

Arguments can be used as options with the swal object.

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

 

Alert Box with Custom Button Text

 

To set the wording of the confirm button, use the button option.

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

 

Confirm Dialog Box

 

The code line below displays a confirm popup window.

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 incorporate an ajax request into 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();
  }
});