How to notification popup box by using toastr JS in Jquery ?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you How to notification popup box by using toastr JS in Jquery ?Sometimes We generally need to utilize notification in our project, in light of the fact that for example if client add new record and we need to display notification with progress alert, when comes mistake then, at that point display blunder notication. So assuming you use jquery notification popup, it’s better that way it’s format looks like great.

In this example I will use toastr.js plugin that will give a few notification type like admonition, achievement, data, mistake and so on and a few capacity. toastr Jquery plugin you can utilize effectively with bootstrap and very modify. You can run cry example and you can perceive how it functions and very great.

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 class="container text-center">
	<br/>
		<h2>Jquery - notification popup box using toastr JS Plugin</h2>
	<br/>
	<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>
</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>

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →