Collection of free jQuery modal/dialog window examples and plugins for advertisements, forms and a simple messages.

21 jQuery Modal/Dialog Windows

Collection of free jQuery modal/dialog window examples and plugins for advertisements, forms and a simple messages.

Related Articles

  1. CSS Modal Windows

Table of Contents:

  1. jQuery Modal/Dialog Examples
  2. jQuery Modal/Dialog Plugins

jQuery Modal/Dialog Examples

Author

  • evans

Made with

  • HTML (Pug) / CSS (Stylus) / JS

About a code

Modal

Sliding modal window made with jQuery.

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

Responsive: yes

Dependencies: jquery.js

Author

  • David Fitas

Made with

  • HTML / CSS / JS

About a code

Simple jQuery Modal

Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.

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

Responsive: no

Dependencies: jquery.js

Author

  • Bryce Snyder

Made with

  • HTML / CSS (Stylus) / JS

About a code

jQuery Modal with Animation

Success and wrong modal with animation.

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

Responsive: yes

Dependencies: bootstrap.css, jquery.js

Author

  • lefoy

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Modal Box

Animated fullscreen modal box.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Michael Smith

Made with

  • HTML / CSS (SCSS) / JS

About a code

Swing Out Modal

Fun little modal concept in jQuery.

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

Responsive: no

Dependencies: font-awesome.css, jquery.js

Author

  • LegoMushroom

Made with

  • HTML / CSS (Stylus) / JS (CoffeeScript)

About a code

Modal Window Destroy Concept

A small experiment on how to blow any HTML element.

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

Responsive: no

Dependencies: jquery.js, howler.js, html2canvas.js

Author

  • Tey Tag

Made with

  • HTML / CSS (SCSS) / JS

About a code

Modal Animation Physics

Messing around with keyframe/transition physics for a modal. Mostly focused on the timing between the overlay, modal container, and modal content to try to make the whole event look more organic.

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

Responsive: yes

Dependencies: font-awesome.css, jquery.js

jQuery Modal/Dialog Plugins

Demo image: jQuery Avgrund
Made by
  • Dmitri Voronianski
Github activity
  • 1831 stars
  • 111 watchers
About the plugin

Avgrund

Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Demo image: iziModal
Made by
  • Marcelo Dolce
Github activity
  • 1678 stars
  • 81 watchers
About the plugin

iziModal

Elegant, responsive, flexible and lightweight modal plugin with jQuery.

Demo image: jQuery Modal
Made by
  • Kyle Fox
Github activity
  • 1549 stars
  • 83 watchers
About the plugin

jQuery Modal

A simple & lightweight method of displaying modal windows with jQuery.

Demo image: Animated Modal
Made by
  • João Pereira
Github activity
  • 842 stars
  • 43 watchers
About the plugin

Animated Modal

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.

Demo image: jQuery Popup Overlay
Made by
  • Vast Engineering
Github activity
  • 439 stars
  • 71 watchers
About the plugin

jQuery Popup Overlay

jQuery plugin for responsive and accessible modal windows and tooltips.

Demo image: bPopup
Made by
  • dinbror
Github activity
  • 427 stars
  • 48 watchers
About the plugin

bPopup

bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.

Demo image: OmniWindow
Made by
  • Alexander Rudenka
Github activity
  • 112 stars
  • 8 watchers
About the plugin

OmniWindow

OmniWindow – extremely customizable modal plugin for jQuery.

Demo image: Zebra_Dialog
Made by
  • Stefan Gabos
Github activity
  • 98 stars
  • 22 watchers
About the plugin

Zebra_Dialog

A small, compact, and highly configurable jQuery plugin for creating modal dialog boxes.

Demo image: jquery-plainModal
Made by
  • anseki
Github activity
  • 70 stars
  • 4 watchers
About the plugin

jquery-plainModal

The simple jQuery Plugin for fully customizable modal windows.

Demo image: Accessible Modal Dialog
Made by
  • Scott O'Hara
Github activity
  • 60 stars
  • 4 watchers
About the plugin

Accessible Modal Dialog

jQuery a11y modal window.

Demo image: SweetModal
Made by
  • Adepto.as
Github activity
  • 56 stars
  • 10 watchers
About the plugin

SweetModal

Sweet, easy and powerful modals using jQuery. Replace alert(), confirm(), prompt() and many plugins with style and elegance.

Demo image: Modal
Made by
  • Michał Buczko
Github activity
  • 55 stars
  • 4 watchers
About the plugin

Modal

jQuery plugin to create modal windows.

Demo image: Focus
Made by
  • Elkfox
Github activity
  • 4 stars
  • 4 watchers
About the plugin

Focus

A minimal popup, modal, notification, overlay, drawer and dialogue window plugin.

Demo image: Modal Box
Made by
  • WebGadgets
Github activity
  • 0 stars
  • 1 watchers
About the plugin

Modal Box

The plugin Modal Box helps you to create a window that pops up in front of other elements on your page. It can be used for advertisements, subscription form, uploading forms, login/register forms or for displaying a simple message to the visitor.

back to top