10 Best Modal Components In JavaScript & Pure CSS (2020 Update)

by jQueryScript,

The modal component allows you to overlay any web content (such as images, videos, text, ajax contents) on top of the webpage.

In this post you will find the 10 best and full free Modal components implemented in jQuery, Native JavaScript, and/or Pure CSS/CSS3. I hope you like it.

Originally Published Nov 20 2017, updated Feb 1st 2020

Table of contents:

jQuery Modal Plugins:

Responsive jQuery Lightbox With Amazing CSS3 Effects - Fancy Box 3

Fancy Box 3 is a jQuery lightbox plugin that is completely rewritten from Fancybox, a Mac Style lightbox plugin, with new features and updated graphics. Licensed under the GPLv3 license for all open source applications.

Kaomos Button

[Demo] [Download]


Animated AJAX-Enabled Modal Plugin With jQuery - Modal.js

A simple, flexible jQuery modal plugin used to present any DOM element or AJAX content in a dynamic, animated, responsive modal window with several useful options.

Animated AJAX-Enabled Modal Plugin With jQuery - Modal.js

[Demo] [Download]


Responsive CSS3 Animated jQuery Modal Plugin - iziModal

iziModal is a simple, fast jQuery plugin which lets you create responsive, beautiful, highly customizable modal windows with CSS3 powered transition effects.

Responsive CSS3 Animated jQuery Modal Plugin - iziModal

[Demo] [Download]


Simple Gallery Lightbox Plugin with jQuery and Bootstrap - Ekko Lightbox

Ekko Lightbox is a jQuery plugin which allows you to create a gallery lightbox using Bootstrap modal dialog component. Supports any html elements including images, galleries, iframes, Youtube videos, AJAX content and much more.

Simple Gallery Lightbox Plugin with jQuery and Bootstrap - Ekko Lightbox

[Demo] [Download]


Versatile jQuery Popup Window Plugin - jBox

jBox is a flexible, modular, robust jQuery plugin to implement a wide variety of popup windows on your web page & application.

Versatile jQuery Popup Window Plugin - jBox

[Demo] [Download]


Vanilla JS Modal Components:

Vanilla JavaScript Modal Popup Library – Novicell Overlay

Novicell Overlay is a Vanilla JavaScript modal library used to overlay any content and Youtube/Vimeo videos on top of the webpage.

Vanilla JavaScript Modal Popup Library – Novicell Overlay

[Demo] [Download]


Multipurpose Modal & Popup Window – Msg

Msg is a JavaScript library to create and manage highly customizable modal windows and popup boxes on the webpage. Also can be used for lightbox, alerts, notifications, snack bars and much more.

Multipurpose Modal & Popup Window – Msg

[Demo] [Download]


Animated Accessible Modal In Pure JavaScript – microModal

microModal is a lightweight JavaScript library for inserting animated, accessible modal windows into your document.

Animated Accessible Modal In Pure JavaScript – microModal

[Demo] [Download]


Pure CSS Modal Components:

Minimal Pure CSS Responsive Modal Box – modalcss

modalcss is an ultra-light CSS solution to create a simple, responsive modal window with CSS3 animations. Based on pure CSS and plain html structure, without the need to write any checkbox or radio button tricks used in other pure CSS modal solutions.

Minimal Pure CSS Responsive Modal Box – modalcss

[Demo] [Download]


CSS Only Responsive Modal Window – Light Modal

Light Modal is a lightweight (2kb minified) CSS library to create responsive, customizable, CSS3 animated modal windows with no dependency.

CSS Only Responsive Modal Window – Light Modal

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome modal windows on the web & mobile? Check out the jQuery Modal and JavaScript/CSS Modal sections.