Bootstrap SweetAlert Confirm Dialog Box Model Example
When we deal with delete task then we always require to ask with model dialog and yes or no for conformation with message. So, if you have bootstrap then you can use simply SweetAlert plugin. Bootstrap SweetAlert plugin provide alert box, confirm dialog box and prompt box.
In this example i use bootstrap js and css and SweetAlert plugin js and css. It is very simple and it gives us better layout that way we don't need to do for design. So let's see demo and get demo code.
Example:
<html lang="en">
<head>
<title>Bootstrap SweetAlert - Confirm dialog box model with yes and no option example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://libraries.cdnhttps.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://raw.githubusercontent.com/lipis/bootstrap-sweetalert/master/dist/sweetalert.js" ></script>
</head>
<body>
<div class="container">
<!-- Delete Button -->
<button class="btn btn-danger remove">Delete</button>
</div>
<script type="text/javascript">
$('.remove').click(function(){
swal({
title: "Are you sure want to remove this item?",
text: "You will not be able to recover this item",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Confirm",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your item deleted.", "success");
} else {
swal("Cancelled", "You Cancelled", "error");
}
});
});
</script>
</body>
</html>
You can also get more information about plugin from here : bootstrap-sweetalert.
