Table of Contents
  1. CSS ONLY POPUP
    1. Author
    2. Links
    3. Made with
  2. MATERIAL UI POPUP
    1. Author
    2. Links
    3. Made with
  3. MODAL
    1. Author
    2. Links
    3. Made with
  4. LOGIN MODAL
    1. Author
    2. Links
    3. Made with
  5. FANCY POP-UP
    1. Author
    2. Links
    3. Made with
  6. POP-UP DESIGN
    1. Author
    2. Links
    3. Made with
  7. FOLDING MODAL
    1. Author
    2. Links
    3. Made with
  8. CSS POPUP
    1. Author
    2. Links
    3. Made with
  9. SUPER SIMPLE EASY MODAL
    1. Author
    2. Links
    3. Made with
  10. CSS ONLY POPUP ANIMATION
    1. Author
    2. Links
    3. Made with
  11. POPUP OVERLAY ANIMATION
    1. Author
    2. Links
    3. Made with
  12. ANIMATE MODAL OUT FROM TRIGGER
    1. Author
    2. Links
    3. Made with
  13. SUPER EASY TOTALLY COOL MODAL
    1. Author
    2. Links
    3. Made with
  14. MOVE MODAL IN ON PATH
    1. Author
    2. Links
    3. Made with
  15. AN ONBOARDING MODAL WITH VUE.JS
    1. Author
    2. Links
    3. Made with
  16. React Modal UI
    1. Author
    2. Made with
  17. HTML5 Dialog Element
    1. Author
    2. Made with
  18. JS Simple Modal Box Snippet
    1. Author
    2. Made with
  19. Shifting Material Button Modal
    1. Author
    2. Made with
  20. Responsive Modal Design
    1. Author
    2. Made with
  21. ModalX Animated Modal
    1. Author
    2. Made with
  22. Flat Modal Window
    1. Author
    2. Made with
  23. Responsive Modal
    1. Author
    2. Made with
  24. Simplistic Dialog
    1. Author
    2. Made with
  25. No JS Modal Popup Window
    1. Author
    2. Made with
  26. Another Modal Box
    1. Author
    2. Made with
  27. CSS Only Modal
    1. Author
    2. Made with
  28. Flappy Dialog
    1. Author
    2. Made with
  29. Modal With Clip-Path
    1. Author
    2. Made with
  30. Modal Window
    1. Author
    2. Made with
  31. Morph Button To Modal
    1. Author
    2. Made with
  32. Modal Popup
    1. Author
    2. Made with
  33. Origami Dialog Effect
    1. Author
    2. Made with
  34. POPUP/OVERLAY
    1. Author
    2. Links
    3. Made with
  35. Modal Interaction With Genie Effect
    1. Author
    2. Made with
  36. Simple, Flexible And Responsive Flexbox-Based Modal
    1. Author
    2. Made with
  37. Animated Modal Box
    1. Author
    2. Made with
  38. Modal Dialog
    1. Author
    2. Made with
  39. Modal Animation
    1. Author
    2. Made with
  40. 3D Dialog
    1. Author
    2. Made with
  41. Basic CSS Modal
    1. Author
    2. Made with
  42. Modal Window Destroy Concept
    1. Author
    2. Made with
  43. Prompt Dialog With Background Blur
    1. Author
    2. Made with
  44. Modal Window
    1. Author
    2. Made with
  45. Pure CSS Modal
    1. Author
    2. Made with
  46. Pure CSS Modal + Slider
    1. Author
    2. Made with
  47. Morphing Modal Window
    1. Author
    2. Made with
  48. Modal Animation Physics
    1. Author
    2. Made with
  49. Swing Out Modal
    1. Author
    2. Made with
  50. Push Modal Idea
    1. Author
    2. Made with
  51. Pop-Up With Blurred Background Animation
    1. Author
    2. Made with
  52. Simple Dialog Effects
    1. Author
    2. Made with
  53. CSS Only Line Animated Modal
    1. Author
    2. Made with
  54. Pure CSS Animated Modals
    1. Author
    2. Made with
  55. Draggable Translucent Modal
    1. Author
    2. Made with
  56. Simple Confirmation Popup
    1. Author
    2. Made with

CSS ONLY POPUP

Simple popup in HTML and CSS.

Author

  • Lasse Diercks

Made with

  • HTML / CSS (SCSS)

MATERIAL UI POPUP

Easing is not easy! However, with the right easing from the Material Design guidelines, you get punchy and snappy animations.

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

Basic CSS-only modal window.

Author

  • Timothy Long

Made with

  • HTML / CSS (SCSS)

LOGIN MODAL

Modal login form in HTML, CSS and JavaScript.

Author

  • Mert Cukuren

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

FANCY POP-UP

Author

  • Thibaud Goiffon

Made with

  • HTML / CSS

POP-UP DESIGN

Pure CSS pop-up design with animation.

Author

  • fajjet

Made with

  • HTML/Pug
  • CSS/Less

FOLDING MODAL

Folding modal window with HTML, CSS and JS.

Author

  • Blake Bowen

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (tweenmax.js)

CSS POPUP

Pure CSS modal window.

Author

  • Erdem Uslu

Made with

  • HTML
  • CSS/SCSS

SUPER SIMPLE EASY MODAL

Super simple easy modal with ES6.

Author

  • Joshua Ward

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

CSS ONLY POPUP ANIMATION

HTML and CSS popup animation.

Author

  • Stas Melnikov
  • 06.09.2017

Made with

  • HTML
  • CSS

Popup overlay using HTML and CSS and JavaScript.

Author

  • Chouaib Blgn
  • 11.08.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

ANIMATE MODAL OUT FROM TRIGGER

Animate modal out from trigger with popmotion.js.

Author

  • Popmotion
  • 28.07.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (popmotion.js)

SUPER EASY TOTALLY COOL MODAL

Only CSS super easy totally cool modal window.

Author

  • Joshua Ward
  • 13.07.2017

Made with

  • HTML
  • CSS/SCSS

MOVE MODAL IN ON PATH

Move modal windows in on path with HTML, CSS and JavaScript.

Author

  • Chris Coyier
  • 28.06.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

AN ONBOARDING MODAL WITH VUE.JS

Step through on-boarding (or whatever, really) screens in a modal horizontally or vertically.

Author

  • Jase
  • 18.05.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (vue.js)

React Modal UI

Modal UI with HTML, CSS and React.js.

Author

  • Mike

Made with

  • Html / CSS
Demo and Download

HTML5 Dialog Element

Messing around with HTML5’s dialog element.

Author

  • Andreas J. Virkus

Made with

  • Html / CSS
Demo and Download

JS Simple Modal Box Snippet

Simple modal box snippet in HTML, CSS and JavaScript.

Author

  • Tobias Bogliolo

Made with

  • Html / CSS / Javascript
Demo and Download

Shifting Material Button Modal

Two call-to-action buttons that give context to your modals in a Material Design fashion.

Author

  • Ettrics

Made with

  • Html / CSS
Demo and Download

Responsive Modal Design

Material Design inspired modals. No jQuery required. Responsive.

Author

  • Ettrics

Made with

  • Html / CSS
Demo and Download

ModalX Animated Modal

Animated modal window with HTML, CSS and JavaScript.

Author

  • Christopher Bicudo

Made with

  • Html / CSS / Javascript
Demo and Download

Flat Modal Window

Flat modal window with HTML, CSS and JavaScript.

Author

  • Dronca Raul

Made with

  • Html / CSS / Javascript
Demo and Download

Responsive Modal

Simple responsive modal with HTML, CSS and JavaScript.

Author

  • Nainoa Shizuru

Made with

  • Html / CSS / Javascript
Demo and Download

Simplistic Dialog

Simplistic dialog with HTML, CSS and JavaScript.

Author

  • Tristan White

Made with

  • Html / CSS / Javascript
Demo and Download

No JS Modal Popup Window

Using the ol’ label, checkbox trick to launch a modal window. All CSS. No JavaScript required.

Author

  • David Conner

Made with

  • Html / CSS / Javascript
Demo and Download

Another Modal Box

Yet another modal box!

Author

  • Valentine

Made with

  • Html / CSS
Demo and Download

CSS Only Modal

A challenge to create a confirm modal without any JavaScript. Probably not usable in production, but still it works.

Author

  • Kristoffer Östlund

Made with

  • Html / CSS / Javascript
Demo and Download

Flappy Dialog

HTML, CSS and JavaScript flappy dialog.

Author

  • Alex

Made with

  • Html / CSS / Javascript
Demo and Download

Modal that animate opens with animation clip-path. Observe clip-path aren’t hardware accelerated or works in IE anything.

Author

  • Jonas Sandstedt

Made with

  • Html / CSS
Demo and Download

Modal window with HTML, CSS and JavaScript.

Author

  • Ophelia Fournier-Laflamme

Made with

  • Html / CSS / Javascript
Demo and Download

Morph Button To Modal

Morph button to modal with React.js

Author

  • Kyle J. Kress

Made with

  • Html / CSS / Javascript
Demo and Download

HTML, CSS and JavaScript modal window.

Author

  • Nastasia

Made with

  • Html / CSS / Javascript
Demo and Download

Origami Dialog Effect

The idea is to replace the path of the button container into origami path step by step.

Author

  • Bhakti Al Akbar

Made with

  • Html / CSS
Demo and Download

POPUP/OVERLAY

Popup/Overlay window in HTMl, CSS and JS.

Author

  • Fabio Ottaviani
  • 02.03.2016

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Inspired by Mac OS X minimize interaction. Built with SVG and Greensock plugin.

Author

  • Bhakti Al Akbar

Made with

  • Html / CSS
Demo and Download

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.

Author

  • Bryan Chalker

Made with

  • CSS / jQuery
Demo and Download

Animated Modal Box

HTML, CSS and JavaScript animated modal box.

Author

  • lefoy

Made with

  • Html / CSS / Javascript
Demo and Download

Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.

Author

  • David Fitas

Made with

  • Html / CSS
Demo and Download

Modal animation with HTML, CSS and JavaScript.

Author

  • Giana

Made with

  • Html / CSS / Javascript
Demo and Download

3D Dialog

3D modal dialog window in HTML/CSS and JavaScript.

Author

  • Geza Dombi

Made with

  • Html / CSS / Javascript
Demo and Download

Basic CSS Modal

Basic modal window with HTML and CSS.

Author

  • Timothy Long

Made with

  • Html / CSS
Demo and Download

Modal window destroy concept with HTML, CSS and JavaScript.

Author

  • LegoMushroom

Made with

  • Html / CSS / Javascript
Demo and Download

Prompt Dialog With Background Blur

Purely CSS-driven popup dialog with a soothing transition animation and background blur.

Author

  • Tuomas Hatakka

Made with

  • Html / CSS
Demo and Download

Modal window with HTML, CSS and JavaScript.

Author

  • Philipp Rappold

Made with

  • Html / CSS / Javascript
Demo and Download

Pure CSS Modal

HTML and CSS modal window.

Author

  • Mark Holmes

Made with

  • Html / CSS
Demo and Download

Pure CSS Modal + Slider

Responsive modal dialog using css only, including sliding/carousel content inside the modal.

Author

  • Marvin Orendain

Made with

  • Html / CSS
Demo and Download

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.

Author

  • CodyHouse

Made with

  • Html / CSS / Javascript
Demo and Download

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.

Author

  • Tey Tag

Made with

  • Html / CSS / Javascript
Demo and Download

Swing Out Modal

Fun little modal concept with HTML and CSS.

Author

  • Michael Smith

Made with

  • Html / CSS
Demo and Download

Push Modal Idea

Neat little way to give your page some depth.

Author

  • Short

Made with

  • Html / CSS / Javascript
Demo and Download

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.

Author

  • Benjamin Dalton

Made with

  • Html / CSS / Javascript
Demo and Download

Simple Dialog Effects

Simple dialog effects in HTML, CSS and JavaScript.

Author

  • dodozhang21

Made with

  • Html / CSS / Javascript
Demo and Download

CSS Only Line Animated Modal

Modal draws then fades in using SVG & CSS animation.

Author

  • Tom

Made with

  • Html / CSS
Demo and Download

Pure CSS Animated Modals

Animated slide down modal with browser back support. No JS animated slide down modal with tabs. No JS.

Author

  • Tom

Made with

  • Html / CSS
Demo and Download

Draggable Translucent Modal

Draggable translucent modal with HTML, CSS and JavaScript.

Author

  • Jesse Couch

Made with

  • Html / CSS / Javascript
Demo and Download

Simple Confirmation Popup

Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.

Author

  • Adventures in Missions

Made with

  • Html / CSS / Javascript
Demo and Download