ItSolutionStuff.com

JQuery Notification Popup Box using Toastr JS Example

By Hardik Savani • June 1, 2023
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.

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>

You can get more information from here : toastr.

Tags: jQuery
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

JQuery Moment Get Current Date Example

Read Now →

Jquery Only Allow Input Float Number Example

Read Now →

Jquery Input Mask Phone Number Validation Example

Read Now →

Calculate Number of Days Between Two Dates in JQuery

Read Now →

JQuery Toggle Hide Show Div on Click Event Example

Read Now →

How to Remove Duplicate Object from Array in JQuery?

Read Now →

How to Remove Duplicate Value from Array in JQuery?

Read Now →

Codeigniter JQuery Ajax Request Example

Read Now →

PHP JQuery Ajax Image Upload Example Tutorial

Read Now →

How to Disable Right Click Menu using JQuery?

Read Now →

Bootstrap Notification Popup Box using Bootstrap-growl JS Example

Read Now →

How to Convert Line Breaks to br in jQuery ?

Read Now →

How to Check Object is Empty or Not in JQuery?

Read Now →