Collection
Post cover
Created 4 month back

Best 18 jQuery Notifications

Collection of free jQuery notification and alert code examples (boxes, badges, etc.) from codepen and other resources. Cookie policy notifications, alert badges with animations and more.

Notification Bell User-Interactions

Author: Himalaya Singh

Links: demo and code

Made with: HTML / CSS / JS

Experimenting with CSS animations, built a design of notification bell button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Notifications Component

Author: Damián Muti

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

This is a Sass mixin that provides notifications functionality using little-to-none JavaScript. It makes use of CSS transitions and animations to display notifications as popups or bars on different locations of the viewport. The best thing is that it is fully customizable and easy to use.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Evil Cookie Policy

Author: Álex

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Notification

Author: Souleste

Links: demo and code

Made with: HTML / CSS / JS

Animated Material notification in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css, jquery.js

Post cover

Profile and Notification Dropdowns

Profile and Notification Dropdowns using HTML CSS and Jquery

Dependencies: font-awesome.js

Author: Coding Market

Links: GitHub

Made with: HTML (65.1%), CSS (34.9%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
5 1 7

Toast Messages + Remove Animation

Author: Veronica

Links: demo and code

Made with: HTML / CSS / JS

Toast messages UI components with jQuery remove animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Notify Better

An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications

Author: peachananr (Pete R.)

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
377 16 75

Pop Up Notification

Author: David

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, tweenmax.js

Toastr

Toastr is a Simple JavaScript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

Author: CodeSeven

Links: GitHub, Website

Made with: JavaScript (66.8%), CSS (24.5%), HTML (8.7%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
11.3k 349 2k

NotifyJS

Notify.js - is a jQuery simple, versatile notification library to provide simple yet fully customisable notifications.

Author: jpillora (Jaime Pillora)

Links: GitHub, Website

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
1.9k 72 750

Alert Components

Author: Lucas Oliveira

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Notifications, Alerts, Modals

Author: DevTips

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

OhSnap!.js

A simple jQuery/Zepto notification library designed to be used in mobile apps

Author: justindomingue (Justin Domingue)

Responsive: yes

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
280 14 66

Notification Animation

Author: Halil İbrahim Nuroğlu

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: materialdesignicons.css, jquery.js

Notifications

Author: Hampus Persson

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Growl style notifications in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Overhang.js

Author: Paul. K; June 24, 2015

Links: github page, home page

A jQuery plugin for notifications, prompts and confirmations.

Notification Badge Animation

Author: Valery Alikin

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Notification badge exploration.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, anime.js

Bell Notification Animation

Author: Diogo Gomes

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback