Welcome to our collection of CSS modal windows! In this curated compilation, we have gathered a diverse range of HTML and CSS modal window code examples sourced from reputable platforms such as CodePen, GitHub, and other valuable resources.

With our April 2023 update, we are excited to present six new additions to our collection, ensuring that you have access to the latest and most innovative modal window designs available.

Modal windows are a popular UI element used to display additional content or interactions without navigating away from the current page.

Start exploring our collection now and discover the creative ways to engage your users with visually appealing and functional modal windows.

Related Articles

  1. Bootstrap Modal Windows
  2. jQuery Modal Windows
  3. Tailwind Modal Windows

Author

  • Fernando Cohen

Made with

  • HTML / CSS (SCSS)

About a code

Modal Dialog with Backdrop Blur. Only CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Giant Buttons

Author

  • Ismail Vittal

Made with

  • HTML / CSS (SCSS)

About a code

Giant Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Modal with Scroll and Faded Text

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

Modal with Scroll and Faded Text

A simple way to create a modal that never exceed the viewport's height and allows for scroll inside.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

Pop-up without JavaScript

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Window / Modal

Author

  • Nacho Toledo

Made with

  • HTML / CSS (SCSS)

About a code

CSS Window / Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Niels Voogt

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: -

Author

  • Mark Faulkner

Made with

  • HTML / CSS (SCSS)

About a code

CSS Only Popup

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Cookies Popup UI Design

Author

  • Igor Milenkovic

Made with

  • HTML / CSS (Less)

About a code

Cookies Popup UI Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Homer Gaines

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: -

Author

  • Ivan Grozdic

Made with

  • HTML / CSS

About a code

Pure CSS Modal - #15

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: unicons.css

Author

  • Marko

Made with

  • HTML / CSS

About a code

CSS-only Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Abubaker Saeed

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: -

Author

  • Abubaker Saeed

Made with

  • HTML / CSS

About a code

CSS Modal

CSS modal (using :target).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Larissa Rabello

Made with

  • HTML / CSS

About a code

Sign Up Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Lasse Diercks

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: -

Author

  • Mikael Ainalem

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: -

Author

  • Timothy Long

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

Author

  • Mert Cukuren

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: -

Author

  • Thibaud Goiffon

Made with

  • HTML / CSS

About the code

Fancy Pop-Up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pop-up Design

Author

  • fajjet

Made with

  • HTML/Pug
  • CSS/Less

About the code

Pop-up Design

Pure CSS pop-up design with animation.

Demo image: Folding Modal

Author

  • Blake Bowen

Made with

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

About the code

Folding Modal

Folding modal window with HTML, CSS and JS.

Demo image: CSS Popup

Author

  • Erdem Uslu

Made with

  • HTML
  • CSS/SCSS

About the code

CSS Popup

Pure CSS modal window.

Demo image: Super Simple Easy Modal

Author

  • Joshua Ward

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Super Simple Easy Modal

Super simple easy modal with ES6.

Demo Image: CSS Only Popup Animation

Author

  • Stas Melnikov
  • 06.09.2017

Made with

  • HTML
  • CSS

About the code

CSS Only Popup Animation

HTML and CSS popup animation.

Demo Image: PopUp Overlay Animation

Author

  • Chouaib Blgn
  • 11.08.2017

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

PopUp Overlay Animation

Popup overlay using HTML and CSS and JavaScript.