SweetAlert is an open source project javascript library that allows designers to replace default javascript alert with a more advanced and beautiful one. SweetALert makes popups and modals messages look pretty and easy to configure even for beginners.
SweetAlert JavaScript library is very easy to use and can help modernize the default boring JS alert we are used to customizable and beautiful ones.
For this tutorial, we’re going to setup a simple webpage to showcase the work of SweetAlert JavaScript library while also showing the default JS alert alongside it. We’ll create two buttons, one will demonstrate SweetAlert and the other one Defualt JS alert.
FINAL RESULT
We need to follow the following steps below to create our web page;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utopian-io – Beautiful and sweet JavaScript alerts using SweetAlert.JS</title>
</head>
<body>
</body>
</html>
In order to integrate SweetAlert.JS into our page. We have to download the library from the official repo here or we can make use of the available sweetalert CDN links. For this tutorial, we’re going to use CDN link but it’s recommended that make use of local copy for production purpose.
We only need the sweetalert JS CDN link for it work;
JS
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
NB: The additional CSS and JS links are that of bootstrap. Our work does not depend on it but if you’re still interested you can download it here and link it to your work.
<body> section in "sweetalert.html" and create two buttons with onclick attribute like the one below. The classes are that of bootstrap.<button class="btn btn-lg btn-primary" onclick="sweetAlert()">SweetAlert</button>
<button class="btn btn-lg btn-success" onclick="defualtAlert()">DefaultAlert</button>
<script> tag and before the </body> and write down the following code snippets to initiate and configure SweetAlert.Default JS Alert
function defualtAlert() {
alert("I'm a boring and ugly Alert!");
}
Preview in browser
SweetAlert
function sweetAlert() {
swal("What do you want to do?", {
buttons: { //creates a button. You can separate them with a comma.
cancel: "Cancel!",
catch: {
text: "Submit!",
value: "catch",
},
register: true,
try: true,
},
})
.then((value) => {
switch (value) { //creates a switch inbetween the buttons we created above.
case "register":
swal("Type username here:", {
content: "input", //content is an option which describe the content of the modal
})
.then((value) => {
swal(`Your username is: ${value}`);
});
break;
case "catch":
swal("Yaay!", "Registered successfully!", "success");
break;
case "try": // this is a confirm function in sweetalert
swal("Are you sure?", {
dangerMode: true, //this option setup a confirm modal in sweetalert.
buttons: true,
});
break;
}
});
}
There are comments beside the options/methods used in the codes for clarification and explanation. This function sweetAlert() will trigger the sweetalert function created. Swal function is a global function that is use when working with sweetalert. The second part of the code creates a switch to handle the various buttons operations we created. Some of the options used are;
hide and can change the name when it’s set to string.input like we used here or more advanced like attaching an attribute to the input and lots more.true the confirm button will be red and focus will be on the default cancel button.The full source code of this tutorial can be found in my JSFiddle Account
Some of my previous works are;