Javascript SweetAlert: Create Beautiful Alert Popup

Posted on | by tldevtech

SweetAlert is a javascript library which makes popup messages easy and pretty.

Download and Install

//use npm
npm install sweetalert
//use CDN: you can also find SweetAlert on unpkg and jsDelivr and use the global swal variable.
https://unpkg.com/sweetalert/dist/sweetalert.min.js

SweetAlert Examples

//a sweet alert with only title and content
swal("A title", "Content goes here");

//more configurations
swal({
	title: "Popup title", 
	text: "Congratulations! The article was updated successfully.", 
	icon: "success",
	button: {
	  text: "Confirm",
	  value: true,
	  visible: true,
	  className: "",
	  closeModal: true,
	},
	className: "customClass",
	closeOnClickOutside: false,
	closeOnEsc: false,
	dangerMode: true,
	timer: 5000,
});

//with forms
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Your Age",
      type: "number",
    },
  },
});
  • title: the title of the modal
  • text: the main content of modal
  • icon: there are 4 built-in icons that you can use – success, info, warning, and error.
  • button: this is the default confirm button. If you want to replace both cancel and confirm buttons, you need to use buttons parameter.
  • className: apply a custom class name to the modal.
  • closeOnClickOutside: determine whether the modal is closed if user click outside of the modal.
  • closeOnEsc: determine whether the modal is closed when user presses Escape.
  • dangerMode: this is useful to show warning message. If this value is set to true, confirm button’s background is turned into red.
  • timer: the modal is closed after x miliseconds.

Related posts: