FreeFrontend

42 CSS Modal Windows

February 23, 2017 | 20 Minute Read

Collection of HTML, CSS and JavaScript modal windows. Demo and download code (*zip).

Demo Image: React Modal UI
React Modal UI (demo image)

React Modal UI

Modal UI with HTML, CSS and React.js.
Made by Mike
February 8, 2017

download demo and code

See the Pen React Modal Ui by Mike (@mike-grifin) on CodePen.

Demo Image: HTML5 Dialog Element
HTML5 Dialog Element (demo image)

HTML5 Dialog Element

Messing around with HTML5's dialog element.
Made by Andreas J. Virkus
January 31, 2017

download demo and code

See the Pen HTML5 Dialog element by Andreas J. Virkus (@ajv) on CodePen.

Demo Image: JS Simple Modal Box Snippet
JS Simple Modal Box Snippet (demo image)

JS Simple Modal Box Snippet

Simple modal box snippet in HTML, CSS and JavaScript.
Made by Tobias Bogliolo
November 5, 2016

download demo and code

See the Pen JS | Simple Modal Box Snippet by Tobias Bogliolo (@tobiasdev) on CodePen.

Demo Image: Shifting Material Button Modal
Shifting Material Button Modal (demo image)

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

download demo and code

See the Pen Shifting Material Button Modal by Ettrics (@ettrics) on CodePen.

Demo Image: Responsive Modal Design
Responsive Modal Design (demo image)

Responsive Modal Design

Material Design inspired modals. No jQuery required. Responsive.
Made by Ettrics
October 8, 2016

download demo and code

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

Demo Image: Pure CSS Modal
Pure CSS Modal (demo image)

Pure CSS Modal

Pure CSS modal window.
Made by Daniel Griffiths
August 24, 2016

download demo and code

See the Pen Pure CSS Modal by Daniel Griffiths (@danielgriffiths) on CodePen.

Demo Image: ModalX Animated Modal
ModalX Animated Modal (demo image)

ModalX Animated Modal

Animated modal window with HTML, CSS and JavaScript.
Made by Christopher Bicudo
July 28, 2016

download demo and code

See the Pen ModalX Animated Modal by Christopher Bicudo (@D3V1L) on CodePen.

Demo Image: Flat Modal Window
Flat Modal Window (demo image)

Flat Modal Window

Flat modal window with HTML, CSS and JavaScript.
Made by Dronca Raul
July 15, 2016

download demo and code

See the Pen Flat Modal Window by Dronca Raul (@rauldronca) on CodePen.

Demo Image: Responsive Modal
Responsive Modal (demo image)

Responsive Modal

Simple responsive modal with HTML, CSS and JavaScript.
Made by Nainoa Shizuru
July 11, 2016

download demo and code

See the Pen Responsive Modal by Nainoa Shizuru (@nainoashizuru) on CodePen.

Demo Image: Simplistic Dialog
Simplistic Dialog (demo image)

Simplistic Dialog

Simplistic dialog with HTML, CSS and JavaScript.
Made by Tristan White
July 9, 2016

download demo and code

See the Pen Simplistic Dialog by Tristan White (@triss90) on CodePen.

Demo Image: No JS Modal Popup Window
No JS Modal Popup Window (demo image)

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

download demo and code

See the Pen No JS modal popup window by David Conner (@davidicus) on CodePen.

Demo Image: Another Modal Box
Another Modal Box (demo image)

Another Modal Box

Yet another modal box!
Made by Valentine
June 29, 2016

download demo and code

See the Pen Another Modal Box - Zzz by Valentine (@wintr) on CodePen.

Demo Image: CSS Only Modal
CSS Only Modal (demo image)

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

download demo and code

See the Pen CSS only modal by Kristoffer Östlund (@kristofferostlund) on CodePen.

Demo Image: Flappy Dialog
Flappy Dialog (demo image)

Flappy Dialog

HTML, CSS and JavaScript flappy dialog.
Made by Alex
April 15, 2016

download demo and code

See the Pen Flappy Dialog by Alex (@akwright) on CodePen.

Demo Image: Modal With Clip-Path
Modal With Clip-Path (demo image)

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

download demo and code

See the Pen Modal with clip-path by Jonas Sandstedt (@sandstedt) on CodePen.

Demo Image: Modal Window
Modal Window (demo image)

Modal Window

Modal window with HTML, CSS and JavaScript.
Made by Ophelia Fournier-Laflamme
April 14, 2016

download demo and code

See the Pen Modal by Ophelia Fournier-Laflamme (@opheliafl) on CodePen.

Demo Image: Morph Button To Modal
Morph Button To Modal (demo image)

Morph Button To Modal

Morph button to modal with React.js
Made by Kyle J. Kress
March 23, 2016

download demo and code

See the Pen Morph Button to Modal React by Kyle J. Kress (@toastal) on CodePen.

Demo Image: Modal Popup
Modal Popup (demo image)

Modal Popup

HTML, CSS and JavaScript modal window.
Made by Nastasia
March 23, 2016

download demo and code

See the Pen Modal Popup by Nastasia (@nastasia) on CodePen.

Demo Image: Origami Dialog Effect
Origami Dialog Effect (demo image)

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

download demo and code

See the Pen Origami Dialog Effect by Bhakti Al Akbar (@balapa) on CodePen.

Demo Image: Modal Interaction With Genie Effect
Modal Interaction With Genie Effect (demo image)

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

download demo and code

See the Pen Modal Interaction with Genie Effect by Bhakti Al Akbar (@balapa) on CodePen.

Demo Image: Simple, Flexible And Responsive Flexbox-Based Modal
Simple, Flexible And Responsive Flexbox-Based Modal (demo image)

Simple, Flexible And Responsive Flexbox-Based Modal

Flexbox modal example. It's responsive, easy to integrate and extend, and passes content and values via data-attributes. Was looking for a simple approach that was not reliant on any library. Straight CSS/jQuery.
Made by Bryan Chalker
March 1, 2016

download demo and code
Demo Image: Animated Modal Box
Animated Modal Box (demo image)

Animated Modal Box

HTML, CSS and JavaScript animated modal box.
Made by lefoy
February 21, 2016

download demo and code

See the Pen Animated Modal Box by lefoy (@lefoy) on CodePen.

Demo Image: Modal Dialog
Modal Dialog (demo image)

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

download demo and code

See the Pen Modal Dialog by David Fitas (@dfitzy) on CodePen.

Demo Image: Modal Animation
Modal Animation (demo image)

Modal Animation

Modal animation with HTML, CSS and JavaScript.
Made by Giana
January 16, 2016

download demo and code

See the Pen Modal animation by Giana (@giana) on CodePen.

Demo Image: 3D Dialog
3D Dialog (demo image)

3D Dialog

3D modal dialog window in HTML/CSS and JavaScript.
Made by Geza Dombi
December 2, 2015

download demo and code

See the Pen 3D dialog by Geza Dombi (@gezadombi) on CodePen.

Demo Image: Basic CSS Modal
Basic CSS Modal (demo image)

Basic CSS Modal

Basic modal window with HTML and CSS.
Made by Timothy Long
December 2, 2015

download demo and code

See the Pen Basic CSS Modal by Timothy Long (@timothylong) on CodePen.

Demo Image: Modal Window Destroy Concept
Modal Window Destroy Concept (demo image)

Modal Window Destroy Concept

Modal window destroy concept with HTML, CSS and JavaScript.
Made by LegoMushroom
November 24, 2015

download demo and code

See the Pen Modal window destroy concept by LegoMushroom (@sol0mka) on CodePen.

Demo Image: Prompt Dialog With Background Blur
Prompt Dialog With Background Blur (demo image)

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

download demo and code

See the Pen Prompt Dialog with background blur by Tuomas Hatakka (@ndne) on CodePen.

Demo Image: Modal Window
Modal Window (demo image)

Modal Window

Modal window with HTML, CSS and JavaScript.
Made by Philipp Rappold
August 2, 2015

download demo and code

See the Pen Modal by Philipp Rappold (@rppld) on CodePen.

Demo Image: Pure CSS Modal
Pure CSS Modal (demo image)

Pure CSS Modal

HTML and CSS modal window.
Made by Mark Holmes
June 25, 2015

download demo and code

See the Pen Pure CSS Modal by Mark Holmes (@SMLMRKHLMS) on CodePen.

Demo Image: Pure CSS Modal + Slider
Pure CSS Modal + Slider (demo image)

Pure CSS Modal + Slider

Responsive modal dialog using css only, including sliding/carousel content inside the modal.
Made by Marvin Orendain
June 23, 2015

download demo and code

See the Pen Pure CSS Modal + Slider by Marvin Orendain (@marv117) on CodePen.

Demo Image: Morphing Modal Window
Morphing Modal Window (demo image)

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

download demo and code

See the Pen Morphing Modal Window by CodyHouse (@codyhouse) on CodePen.

Demo Image: Modal Animation Physics
Modal Animation Physics (demo image)

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

download demo and code

See the Pen Modal Animation Physics by Tey Tag (@koolhaus) on CodePen.

Demo Image: Swing Out Modal
Swing Out Modal (demo image)

Swing Out Modal

Fun little modal concept with HTML and CSS.
Made by Michael Smith
February 17, 2015

download demo and code

See the Pen Swing Out Modal by Michael Smith (@MichaelRyanSmith) on CodePen.

Demo Image: Push Modal Idea
Push Modal Idea (demo image)

Push Modal Idea

Neat little way to give your page some depth.
Made by Short
February 4, 2015

download demo and code

See the Pen Push Modal Idea by Short (@short) on CodePen.

Demo Image: Pop-Up With Blurred Background Animation
Pop-Up With Blurred Background Animation (demo image)

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

download demo and code

See the Pen Pop-up with blurred background animation by Benjamin Dalton (@jaeming) on CodePen.

Demo Image: Simple Dialog Effects
Simple Dialog Effects (demo image)

Simple Dialog Effects

Simple dialog effects in HTML, CSS and JavaScript.
Made by dodozhang21
December 29, 2014

download demo and code

See the Pen Simple dialog effects by dodozhang21 (@dodozhang21) on CodePen.

Demo Image: CSS Only Line Animated Modal
CSS Only Line Animated Modal (demo image)

CSS Only Line Animated Modal

Modal draws then fades in using SVG & CSS animation.
Made by Tom
December 22, 2014

download demo and code
Demo Image: Pure CSS Animated Modals
Pure CSS Animated Modals (demo image)

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

download demo and code

See the Pen Pure CSS Animated Modals by Tom (@TomJ1588) on CodePen.

Demo Image: Pure CSS Lightbox Technique
Pure CSS Lightbox Technique (demo image)

Pure CSS Lightbox Technique

Lightbox technique using no javascript whatsoever.
Made by Akhbar
October 1, 2014

download demo and code

See the Pen Pure CSS lightbox technique by Akhbar (@akhbar) on CodePen.

Demo Image: Draggable Translucent Modal
Draggable Translucent Modal (demo image)

Draggable Translucent Modal

Draggable translucent modal with HTML, CSS and JavaScript.
Made by Jesse Couch
September 24, 2014

download demo and code

See the Pen Draggable Translucent Modal by Jesse Couch (@designcouch) on CodePen.

Demo Image: Simple Confirmation Popup
Simple Confirmation Popup (demo image)

Simple Confirmation Popup

Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.
Made by Adventures in Missions
July 2, 2014

download demo and code

See the Pen Simple Confirmation Popup by Adventures in Missions (@adventuresinmissions) on CodePen.