SweetAlert.js

Installation

			<script type="text/javascript" src="Assets/SweetAlert.js/sweetalert.min.js"></script>
		

Now play the eacy demo -

			swal("Hello World");
		

			swal("Hello World", "This is Our Beautiful World");
		

			swal("Hello World", "This is Our Beautiful World", 'success');
		

			swal("Hello World", "This is Our Beautiful World", 'warning');
		

			swal("Hello World", "This is Our Beautiful World", 'error');
		

			swal("Hello World", "This is Our Beautiful World", 'info');
		

With Options

All of the above can be done by the following options -

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

With this format, we can specify many more options to customize our alert. For example we can change the text on the confirm button to "Aww yiss!":

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

Promise

SweetAlert uses promises to keep track of how the user interacts with the alert. If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null.

			swal("Click on either the button or outside the modal.")
			.then((value) => {
			  swal(`The returned value is: ${value}`);
			});
		

Danger Mode

By setting buttons (plural) to true, SweetAlert will show a cancel button in addition to the default confirm button. By setting dangerMode to true, the focus will automatically be set on the cancel button instead of the confirm button, and the confirm button will be red instead of blue to emphasize the dangerous action.

			swal({
			  title: "Are you sure?",
			  text: "Once deleted, you will not be able to recover this imaginary file!",
			  icon: "warning",
			  buttons: true,
			  dangerMode: true,
			})
			.then((willDelete) => {
			  if (willDelete) {
			    swal("Poof! Your imaginary file has been deleted!", {
			      icon: "success",
			    });
			  } else {
			    swal("Your imaginary file is safe!");
			  }
			});
		

Customizing Button

We've already seen how we can set the text on the confirm button using button: "Aww yiss!". If we also want to show and customize the cancel button, we can instead set buttons to an array of strings, where the first value is the cancel button's text and the second one is the confirm button's text:

			swal("Are you sure you want to do this?", {
			  buttons: ["Oh noez!", "Aww yiss!"],
			});
		

If you want one of the buttons to just have their default text, you can set the value to true instead of a string:

			swal("Are you sure you want to do this?", {
			  buttons: ["Oh noez!", true],
			});
		

Input

Sometimes, you might run into a scenario where it would be nice to use the out-of-the box functionality that SweetAlert offers, but with some custom UI that goes beyond just styling buttons and text. For that, there's the content option.

			swal("Write something here:", {
			  content: "input",
			})
			.then((value) => {
			  swal(`You typed: ${value}`);
			});