Twitter bootstrap – fancy alert box example and demo using SweetAlert Plugin
In this post we will give you information about Twitter bootstrap – fancy alert box example and demo using SweetAlert Plugin. Hear we will give you detail about Twitter bootstrap – fancy alert box example and demo using SweetAlert PluginAnd how to use it also give you demo for it if it is necessary.
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 >
<h1>Bootstrap Fancy Alert Box Using sweetalert Plugin</h1>
<div >
<button >Primary</button>
<button >Info</button>
<button >Success</button>
<button >Warning</button>
<button >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.
Hope this code and post will helped you for implement Twitter bootstrap – fancy alert box example and demo using SweetAlert Plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs