10 Best Modal Components In JavaScript & Pure CSS (2020 Update)
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.
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.
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.
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.
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.
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.
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.
Animated Accessible Modal In Pure JavaScript – microModal
microModal is a lightweight JavaScript library for inserting animated, accessible modal windows into your document.
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.
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.
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.