Toastr – Simple jQuery Toast Notifications | JS Toastr Example

Image could not load

JQuery Toastr Notification

अगर आप कोई website develop कर रहे हैं तो , इसे और attractive और user friendly बनाने के लिए आप success , error या warning messages को show करने के लिए toastr library का use कर सकते हैं।

What is jQuery Toastr ?

toastr , non-blocking notifications के लिए एक JavaScript library है , इसे use करने के लिए jQuery required है। इस library का main purpose notifications को और user friendly बनाना है।

How to use toastr ?

toastr library को use करने के दो तरीके है -

  • Using CDN

  • Install and use it.

JS toastr CDN

पहला तरीका है direct आप आपने HTML page में toastr library को CDN का use करके include करें , इसके लिए आपको सिर्फ दो files CSS , JavaScript files को include करना है।

CDN link नीचे दी गयी है।

// JS

// CSS

Install toastr library

दूसरा तरीका है toastr library को अपने application में install करके use करना। नीचे कुछ different - different package manager के according install करने की commands दी गयी है।

NuGet Gallery

Install-Package toastr


bower install toastr


npm install --save toastr


yarn add toastr

Ruby on Rails

# Gemfile gem 'toastr-rails' // application.scss @import "toastr";

JavaScript toastr Notification Example

Install करने के बाद , CSS और JavaScript file को add कर लें।

<link href="toastr.css" rel="stylesheet"/> <script src="toastr.js"></script>

Basic use कुछ इस तरह से है।

// Display an info toast with no title.'This is crazy')

इसके अलावा और भी options है जो नीचे दिए गए है।

// Display a warning toast, with no title. toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!') // Display a success toast, with a title. toastr.success('Have fun storming the castle!', 'Miracle Max Says') // Display an error toast, with a title. toastr.error('I do not think that word means what you think it means.', 'Inconceivable!') // Immediately remove current toasts without using animation. toastr.remove() // Remove current toasts using animation. toastr.clear() // Override global options. toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

toastr Escape HTML characters

आप title और message में HTML characters को escape भी कर सकते हैं।

toastr.options.escapeHtml = true;

toastr Close Button

आप alert section में close button भी show करा सकते हैं।

toastr.options.closeButton = true;

या फिर close button का HTML भी replace कर सकते हैं।

toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

इसके अलावा आप hide animation को भी override कर सकते हैं , जैसे कितनी देर में वो notification close हो जाये।

toastr.options.closeMethod = 'fadeOut'; toastr.options.closeDuration = 300; toastr.options.closeEasing = 'swing';

JavaScript toastr Callback Functions

आप Callback Functions का use करके toast की किसी particular event को handle भी कर सकते हैं।

toastr.options.onShown = function() { console.log('hello'); } toastr.options.onHidden = function() { console.log('goodbye'); } toastr.options.onclick = function() { console.log('clicked'); } toastr.options.onCloseClick = function() { console.log('close button clicked'); }

JS Toastr Example

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Toastr Library</title> <link href="" rel="stylesheet" /> </head> <body> <script src=""></script> <script src=""></script> <script> $(function () { // set options. toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-top-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" } toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!'); toastr.success('Have fun storming the castle!', 'Miracle Max Says'); toastr.error('I do not think that word means what you think it means.', 'Inconceivable!'); toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', { timeOut: 5000 }); }); </script> </body> </html>

इसके अलावा आप advance options नीचे दी गयी link पर भी देख सकते हैं।

I Hope , आपको toastr library के बारे में अच्छे से समझ आ गया होगा।

Recent Blogs

Loading ...

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook