The modal component allows you to overlay any web content (such as images, videos, text, ajax contents) on top of the webpage.
Originally Published Nov 20 2017, updated Feb 17 2021
Table of contents:
jQuery Modal Plugins:
A jQuery/HTML5/CSS3 based modal script to create simple, responsive, animated, and reuseable modal popups on your website/application.
A minimal fast jQuery based modal window that uses CSS filters to blur the background (main content) when the modal is opened.
Yet another jQuery Youtube popup plugin which allows you to place the YouTube video inside a responsive modal window with autoplay support.
modallink is a simple but fully configurable plugin which enables you to display any external links into a modal popup via iframe.
Yet another Bootstrap 4 modal wrapper plugin which lets you create beautiful, responsive, dynamic alert/confirm dialog boxes and complex modal windows using Bootstrap 4 modal component.
Vanilla JS Modal Components:
Pure CSS Modal Components:
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.
A simple, responsive modal dialog built using CSS and html checkbox.
A dead simple CSS library which lets you create modal windows using pure CSS/CSS3. Powered by :target and :before pseudo classes. Animated with CSS3 transitions and transforms.