Bootstrap Fancy Alert Box using SweetAlert Example

By Hardik Savani June 12, 2023 Category : Bootstrap jQuery

We always require to give alert box when something success, warning, info etc. we always use alert() of jquery function, If you used twitter bootstrap then you can use SweetAlert Plugin with fancy alert.

SweetAlert Plugin provide a different types of animated alert like for info, primary, success, warning or error. So, you can use anyone as you require. SweetAlert Plugin gives one function swal() with several arguments like title, text, type, showCancelButton etc options so you can make customize alert. In this post i give all types of alert like success, warning, error, info and primary that way you can get any. So let's run bellow example or you can also see demo.

Example:

Read Also: Angular 14 Bootstrap Modal Popup 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>

You can also get more information about plugin from here : bootstrap-sweetalert.

Tags :
Previous

Laravel Generate PDF from HTML View File and Download Example
Next

How to Get File Size from Storage in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares