Jquery notification popup box example using toastr JS plugin with demo
In this post we will give you information about Jquery notification popup box example using toastr JS plugin with demo. Hear we will give you detail about Jquery notification popup box example using toastr JS plugin with demoAnd how to use it also give you demo for it if it is necessary.
We always need to use notification in our project, because for example if user add new record and we need to display notification with success alert, when comes error then display error notication. So if you use jquery notification popup then it’s better that way it’s layout looks like good.
In this example i use toastr.js plugin that provide several notification type like warning, success, info, error etc and several function. toastr Jquery plugin you can use easily with bootstrap and very customize. You can run bellow example and you can see how it works and pretty good.
Example:
<html lang="en">
<head>
<title>Jquery - notification popup box using toastr JS</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
</head>
<body>
<div >
<br/>
<h2>Jquery - notification popup box using toastr JS Plugin</h2>
<br/>
<button >Success</button>
<button >Error</button>
<button >Info</button>
<button >Warning</button>
</div>
<script type="text/javascript">
$(".success").click(function(){
toastr.success('We do have the Kapua suite available.', 'Success Alert', {timeOut: 5000})
});
$(".error").click(function(){
toastr.error('You Got Error', 'Inconceivable!', {timeOut: 5000})
});
$(".info").click(function(){
toastr.info('It is for your kind information', 'Information', {timeOut: 5000})
});
$(".warning").click(function(){
toastr.warning('It is for your kind warning', 'Warning', {timeOut: 5000})
});
</script>
</body>
</html>
You can get more information from here : toastr.
Hope this code and post will helped you for implement Jquery notification popup box example using toastr JS plugin with demo. 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