Bootstrap SweetAlert Confirm Dialog Box Model Example

By Hardik Savani June 13, 2023 Category : Bootstrap jQuery

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:

Read Also: Bootstrap Datepicker Disable Saturday and Sunday 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.

Tags :
Previous

Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch
Next

How to Get Current Controller Name in View Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares