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

By Hardik Savani | July 18, 2016 | | 35123 Viewer | 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:

<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.



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: