Jquery notification popup box example using toastr JS plugin with demo

By Hardik Savani | June 10, 2016 | Category : Javascript Bootstrap jQuery

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.


<html lang="en">


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



<div class="container text-center">


<h2>Jquery - notification popup box using toastr JS Plugin</h2>


<button class="success btn btn-success">Success</button>

<button class="error btn btn-danger">Error</button>

<button class="info btn btn-info">Info</button>

<button class="warning btn btn-warning">Warning</button>


<script type="text/javascript">


toastr.success('We do have the Kapua suite available.', 'Success Alert', {timeOut: 5000})



toastr.error('You Got Error', 'Inconceivable!', {timeOut: 5000})



toastr.info('It is for your kind information', 'Information', {timeOut: 5000})



toastr.warning('It is for your kind warning', 'Warning', {timeOut: 5000})





You can get more information from here : toastr.

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: