Collection of HTML and CSS modal windows. Update of February 2019 collection. 9 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Details Modal
By nesting a modal inside a details element it is automaticly shown when the details is opened. And by nesting the overlay inside the summary element, we can use that to trigger a close.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Less)
About a code
Cookies Popup UI Design
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Only Modal (input:checked)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Modal Using :target Selector
This example shows how to open a modal window using HTML and CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Modal - #15
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: unicons.css
Links
Made with
- HTML / CSS
About a code
CSS-only Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
CSS Modals v2
The second version of my previous pen(CSS Modal). In this one, I showed that there are three different modals with their own unique ids and I am using different links to open and close them.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Modal
CSS modal (using :target).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Sign Up Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: bootstrap.css
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Only Popup
Simple popup in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Material UI Popup
Easing is not easy! However, with the right easing from the Material Design guidelines, you get punchy and snappy animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Modal
Basic CSS-only modal window.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Login Modal
Modal login form in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Fancy Pop-Up
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML/Pug
- CSS/Less
About the code
Pop-up Design
Pure CSS pop-up design with animation.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (tweenmax.js)
About the code
Folding Modal
Folding modal window with HTML, CSS and JS.
Links
Made with
- HTML
- CSS/SCSS
About the code
CSS Popup
Pure CSS modal window.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the code
Super Simple Easy Modal
Super simple easy modal with ES6.
Links
Made with
- HTML
- CSS
About the code
CSS Only Popup Animation
HTML and CSS popup animation.
Links
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
PopUp Overlay Animation
Popup overlay using HTML and CSS and JavaScript.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (popmotion.js)
About the code
Animate Modal Out From Trigger
Animate modal out from trigger with popmotion.js.
Links
Made with
- HTML
- CSS/SCSS
About the code
Super Easy Totally Cool Modal
Only CSS super easy totally cool modal window.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the code
Move Modal In On Path
Move modal windows in on path with HTML, CSS and JavaScript.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (vue.js)
About the code
An Onboarding Modal With Vue.js
Step through on-boarding (or whatever, really) screens in a modal horizontally or vertically.
React Modal UI
Modal UI with HTML, CSS and React.js.
Made by Mike
February 8, 2017
HTML5 Dialog Element
Messing around with HTML5's dialog element.
Made by Andreas J. Virkus
January 31, 2017
JS Simple Modal Box Snippet
Simple modal box snippet in HTML, CSS and JavaScript.
Made by Tobias Bogliolo
November 5, 2016
Shifting Material Button Modal
Two call-to-action buttons that give context to your modals in a Material Design fashion.
Made by Ettrics
October 8, 2016
Responsive Modal Design
Material Design inspired modals. No jQuery required. Responsive.
Made by Ettrics
October 8, 2016
Pure CSS Modal
Pure CSS modal window.
Made by Daniel Griffiths
August 24, 2016
ModalX Animated Modal
Animated modal window with HTML, CSS and JavaScript.
Made by Christopher Bicudo
July 28, 2016
Flat Modal Window
Flat modal window with HTML, CSS and JavaScript.
Made by Dronca Raul
July 15, 2016
Responsive Modal
Simple responsive modal with HTML, CSS and JavaScript.
Made by Nainoa Shizuru
July 11, 2016
Simplistic Dialog
Simplistic dialog with HTML, CSS and JavaScript.
Made by Tristan White
July 9, 2016
No JS Modal Popup Window
Using the ol' label, checkbox trick to launch a modal window. All CSS. No JavaScript required.
Made by David Conner
July 6, 2016
Another Modal Box
Yet another modal box!
Made by Valentine
June 29, 2016
CSS Only Modal
A challenge to create a confirm modal without any JavaScript. Probably not usable in production, but still it works.
Made by Kristoffer Östlund
May 1, 2016
Flappy Dialog
HTML, CSS and JavaScript flappy dialog.
Made by Alex
April 15, 2016
Modal With Clip-Path
Modal that animate opens with animation clip-path. Observe clip-path aren't hardware accelerated or works in IE anything.
Made by Jonas Sandstedt
April 14, 2016
Modal Window
Modal window with HTML, CSS and JavaScript.
Made by Ophelia Fournier-Laflamme
April 14, 2016
Morph Button To Modal
Morph button to modal with React.js
Made by Kyle J. Kress
March 23, 2016
Modal Popup
HTML, CSS and JavaScript modal window.
Made by Nastasia
March 23, 2016
Origami Dialog Effect
The idea is to replace the path of the button container into origami path step by step.
Made by Bhakti Al Akbar
March 4, 2016
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jquery.js)
About the code
Popup/Overlay
Popup/Overlay window in HTMl, CSS and JS.
Modal Interaction With Genie Effect
Inspired by Mac OS X minimize interaction. Built with SVG and Greensock plugin.
Made by Bhakti Al Akbar
March 4, 2016
Simple, Flexible And Responsive Flexbox-Based Modal
Flexbox modal example. It's responsive, easy to integrate and extend, and passes content anattributes. Was looking for a simple approach that was not reliant on any library. Straight CSS/jQuery.
Made by Bryan Chalker
March 1, 2016
Animated Modal Box
HTML, CSS and JavaScript animated modal box.
Made by lefoy
February 21, 2016
Modal Dialog
Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.
Made by David Fitas
January 21, 2016
Modal Animation
Modal animation with HTML, CSS and JavaScript.
Made by Giana
January 16, 2016
3D Dialog
3D modal dialog window in HTML/CSS and JavaScript.
Made by Geza Dombi
December 2, 2015
Basic CSS Modal
Basic modal window with HTML and CSS.
Made by Timothy Long
December 2, 2015
Modal Window Destroy Concept
Modal window destroy concept with HTML, CSS and JavaScript.
Made by LegoMushroom
November 24, 2015
Prompt Dialog With Background Blur
Purely CSS-driven popup dialog with a soothing transition animation and background blur.
Made by Tuomas Hatakka
September 28, 2015
Modal Window
Modal window with HTML, CSS and JavaScript.
Made by Philipp Rappold
August 2, 2015
Pure CSS Modal
HTML and CSS modal window.
Made by Mark Holmes
June 25, 2015
Pure CSS Modal + Slider
Responsive modal dialog using css only, including sliding/carousel content inside the modal.
Made by Marvin Orendain
June 23, 2015
Morphing Modal Window
A call-to-action button that animates and turns into a full-size modal window. The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.js.
Made by CodyHouse
March 12, 2015
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. Believe it or not, inspired by the menu pop-ups in Super Mario 3D.
Made by Tey Tag
February 18, 2015
Swing Out Modal
Fun little modal concept with HTML and CSS.
Made by Michael Smith
February 17, 2015
Push Modal Idea
Neat little way to give your page some depth.
Made by Short
February 4, 2015
Pop-Up With Blurred Background Animation
Here's a popup that appears while blurring out the body underneath. click the 'X' close on the popup and the blur transition back while the popup fades off. Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or lightbox. Uses CSS3 Filter (for blur) and CSS3 Animation for blur transitions. The jQuery is minimal in this iteration, simply used to fade in the pop-up and add and remove the CSS3 classes for blurring.
Made by Benjamin Dalton
December 31, 2014
Simple Dialog Effects
Simple dialog effects in HTML, CSS and JavaScript.
Made by dodozhang21
December 29, 2014
CSS Only Line Animated Modal
Modal draws then fades in using SVG & CSS animation.
Made by Tom
December 22, 2014
Pure CSS Animated Modals
Animated slide down modal with browser back support. No JS animated slide down modal with tabs. No JS.
Made by Tom
December 8, 2014
Pure CSS Lightbox Technique
Lightbox technique using no javascript whatsoever.
Made by Akhbar
October 1, 2014
Draggable Translucent Modal
Draggable translucent modal with HTML, CSS and JavaScript.
Made by Jesse Couch
September 24, 2014
Simple Confirmation Popup
Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.
Made by Adventures in Missions
July 2, 2014