Bootstrap Sweetalert: Show Beautiful Alerts with Bootstrap Sweetalert
Want to change design of JavaScript Alert box ? Bootstrap Sweet alert is a beautiful replacement of JavaScript Alert box. In this post I would like to show how to use Bootstrap Sweetalert in website.
Features Comes with Bootstrap Sweetalert:
- Beautiful/Customizable design.
- Nice Messages to User.
- Custom Text for Confirmation dialog button.
- Easy to Use.
Here i am going to use CDN link of bootstrap sweetalert.Please find below the full example of Bootstrap Sweetalert with confirmation dialog.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<title>Bootstrap Sweet Alert Example</title>
</head>
<body>
<h3>Bootstrap SweetAlert Example</h3>
<a class="btn btn-success btn-lg btnSweetalert">Click Here</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
"use strict"; /* Start of use strict */
(function () {
function14();
})();
function function14() {
$('.btnSweetalert').on("click", function () {
swal({
title: "Are you sure you want to delete this record?",
text: "After you delete this record you will not able to get this!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
closeOnConfirm: false,
closeOnCancel: false},
function (isConfirm) {
if (isConfirm) {
/* Do your Stuffs */
swal("Success!", "Item has been deleted successfully", "success");
} else {
swal("Cancelled", "Something went wrong. Please try again.)", "error");
}
});
});
}
</script>
</body>
</html>
Above code is an example of bootstrap sweetalert with confimation. When user click on button Even handler will detect that Click event and after that Bootstap SweetAlert will be visible with confirmation.You can use ajax to do your custom tasks after checking with ifconfirm condition.
Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion. if you face any issue with this code let us know. We’d love to help!