Twitter bootstrap – fancy alert box example and demo using SweetAlert Plugin

Today now in this post i will talk about Twitter bootstrap – fancy alert box example and demo using SweetAlert Plugin. You have always need to give an alert box when the something success, warning, info etc. We are always use alert() of jquery function, If we are used twitter bootstrap then we can use the SweetAlert Plugin also with fancy alert.

we know in SweetAlert Plugin provide us a different types of animated alert as like for info, primary, success, warning or error. So, we can easily use anyone as we need. In SweetAlert Plugin gives the one function swal() with the several arguments like as title, text, type, showCancelButton etc options so we can make the customize alert.

Now in this post i will give all types of alert as like as success, warning, error, info and also primary on that way you can use anyone.

So let’s start and run the bellow example.

Example:
<html lang="en">
<head>
    <title>Bootstrap Fancy Alert Box Using sweetalert Plugin</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">
    <h1>Bootstrap Fancy Alert Box Using sweetalert Plugin</h1> 
     <div class="examples">
        <button class="btn btn-lg btn-primary sweet-primary">Primary</button>
        <button class="btn btn-lg btn-info sweet-info">Info</button>
        <button class="btn btn-lg btn-success sweet-success">Success</button>
        <button class="btn btn-lg btn-warning sweet-warning">Warning</button>
        <button class="btn btn-lg btn-danger sweet-danger">Danger</button>
      </div>
</div>
<script type="text/javascript">
    $('.sweet-primary').click(function(){
        swal({
          title: "Are you sure?",
          text: "You want to move this button!!",
          type: "info",
          showCancelButton: true,
          confirmButtonClass: 'btn-primary',
          confirmButtonText: 'Primary'
        });
    });
    $('.sweet-info').click(function(){
        swal({
          title: "Are you sure?",
          text: "You want to move this button!!",
          type: "info",
          showCancelButton: true,
          confirmButtonClass: 'btn-info',
          confirmButtonText: 'Info'
        });
    });
    $('.sweet-success').click(function(){
        swal({
          title: "Are you sure?",
          text: "You want to move this button!!",
          type: "success",
          showCancelButton: true,
          confirmButtonClass: 'btn-success',
          confirmButtonText: 'Success'
        });
    });
    $('.sweet-warning').click(function(){
        swal({
          title: "Are you sure?",
          text: "You want to move this button!!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: 'btn-warning',
          confirmButtonText: 'Warning'
        });
    });
    $('.sweet-danger').click(function(){
        swal({
          title: "Are you sure?",
          text: "You want to move this button!!",
          type: "error",
          showCancelButton: true,
          confirmButtonClass: 'btn-danger',
          confirmButtonText: 'Danger'
        });
    });
</script>
</body>
</html>

Read Also: How to convert file extension using CloudConvert in laravel?

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

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 →