How to show Confirm dialog box model with yes and no option SweetAlert ?

Today now in this post i will show you How to show Confirm dialog box model with yes and no option SweetAlert ? When we are deal with any delete task then we always need to ask with a model dialog and also with yes or no for conformation with the message. So, if we are use bootstrap then we can use the simply SweetAlert plugin. In Bootstrap SweetAlert plugin are provide us alert box, confirm dialog box and prompt box.

Now in this example i will use bootstrap js and css and SweetAlert plugin js and also css. It is a very simple and it will gives us a better layout on that way we don’t need to do more for design.

So let’s see the demo and get the 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>

Read Also: How we can create virtual host in ubuntu apache?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →