SweetAlert is a javascript library which makes popup messages easy and pretty.
Table of Contents
Download and Install
[javascript]
//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
[/javascript]
SweetAlert Examples
[javascript]
//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",
},
},
});
[/javascript]
- 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.
