Jquery - notification popup box using toastr JS Plugin

  • 04-04-2022
  • 1344
  • Jquery
  • Haresh Chauhan

Hello Developers in this tutorial we will learn how to setup Jquery notification using toastr js plugin. It's an easy way to make this example. We always need to use notification in our project like creating record success messages, Error message, information message And warning message to we will always show the user. But, In this Jquery Notification using toaster js plugin. it's good for the notification with good looks like.

In this example, I use a toastr js plugin that provides several ways to create notification but it's good way to manage notification. In this example, I will show you how to set toastr.js plugin and how can we use it. You can also use notification like warning, success, info, error etc and several function. toastr plugin through you can use easily with bootsrap and you can custimozie as per your need.

So, let's create the toastr JS example using plugin.

Jquery - notification popup box using toastr JS Plugin

Example : Jquery - notification popup box using toastr JS Plugin

    <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 - webappfix.com</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>

If you want get more information visit this link Toastr

I hope it can help you.

Thanks...

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :