Collection of HTML, CSS, and JavaScript Modal Windows

Explore a collection of HTML, CSS, and JavaScript modal window code examples to create stylish and interactive pop-up modals for your website.

Home ↔
CSS ↔
Collection of HTML, CSS, and JavaScript Modal Windows

Modal Dialog with Backdrop Blur. Only CSS

Author:
Fernando Cohen | April 7, 2022

Made with:
HTML / CSS (SCSS)

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Giant Buttons

Author:
Ismail Vittal | March 15, 2022

Made with:
HTML / CSS (SCSS)

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Modal with Scroll and Faded Text

Author:
Håvard Brynjulfsen | January 13, 2022

Made with:
HTML / CSS (SCSS)

About a code

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

demo and code

Learn More

Pop-up without JavaScript

Author:
Håvard Brynjulfsen | July 13, 2021

Made with:
HTML / CSS (SCSS)

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

CSS Window / Modal

Author:
Nacho Toledo | June 28, 2021

Made with:
HTML / CSS (SCSS)

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Details Modal

Author:
Niels Voogt | January 10, 2021

Made with:
HTML / CSS (SCSS)

About a code

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

demo and code

Learn More

CSS Only Popup

Author:
Mark Faulkner | December 18, 2020

Made with:
HTML / CSS (SCSS)

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Cookies Popup UI Design

Author:
Igor Milenkovic | November 1, 2020

Made with:
HTML / CSS (Less)

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

Responsive:
no

Dependencies:
-

demo and code

Learn More

CSS Modal Using :target Selector

Author:
Homer Gaines | August 28, 2020

Made with:
HTML / CSS (SCSS)

About a code

This example shows how to open a modal window using HTML and CSS only.

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Pure CSS Modal - #15

Author:
Ivan Grozdic | July 10, 2020

Made with:
HTML / CSS

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

Responsive:
yes

Dependencies:
unicons.css

demo and code

Learn More

CSS-only Modal

Author:
Marko | April 27, 2020

Made with:
HTML / CSS

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

Responsive:
yes

Dependencies:
font-awesome.css

demo and code

Learn More

CSS Modals v2

Author:
Abubaker Saeed | August 26, 2019

Made with:
HTML / CSS

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

CSS Modal

Author:
Abubaker Saeed | August 24, 2019

Made with:
HTML / CSS

About a code

CSS modal (using :target).

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Sign Up Modal

Author:
Larissa Rabello | April 22, 2019

Made with:
HTML / CSS

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

Responsive:
no

Dependencies:
bootstrap.css

demo and code

Learn More

CSS Only Popup

Author:
Lasse Diercks | January 26, 2019

Made with:
HTML / CSS (SCSS)

About a code

Simple popup in HTML and CSS.

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Material UI Popup

Author:
Mikael Ainalem | November 27, 2018

Made with:
HTML / CSS

About a code

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

demo and code

Learn More

Modal

Author:
Timothy Long | December 19, 2018

Made with:
HTML / CSS (SCSS)

About a code

Basic CSS-only modal window.

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

Responsive:
no

Dependencies:
font-awesome.css

demo and code

Learn More

Login Modal

Author:
Mert Cukuren | October 1, 2018

Made with:
HTML / CSS (SCSS) / JavaScript (Babel)

About a code

Modal login form in HTML, CSS and JavaScript.

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

Responsive:
yes

Dependencies:
-

demo and code

Learn More

Fancy Pop-Up

Author:
Thibaud Goiffon | September 1, 2018

Made with:
HTML / CSS

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

Responsive:
no

Dependencies:
-

demo and code

Learn More

Pop-up Design

Author:
fajjet | March 15, 2018

Made with:
HTML/PugCSS/Less

About a code

Pure CSS pop-up design with animation.

demo and code

Learn More

Folding Modal

Author:
Blake Bowen | February 26, 2018

Made with:
HTMLCSS/SCSSJavaScript (tweenmax.js)

About a code

Folding modal window with HTML, CSS and JS.

demo and code

Learn More

CSS Popup

Author:
Erdem Uslu | January 28, 2018

Made with:
HTMLCSS/SCSS

About a code

Pure CSS modal window.

demo and code

Learn More

Super Simple Easy Modal

Author:
Joshua Ward | January 9, 2018

Made with:
HTMLCSS/SCSSJavaScript

About a code

Super simple easy modal with ES6.

demo and code

Learn More

CSS Only Popup Animation

Author:
Stas Melnikov | 06.09.2017

Made with:
HTMLCSS

About a code

HTML and CSS popup animation.

demo and code

Learn More

PopUp Overlay Animation

Author:
Chouaib Blgn | 11.08.2017

Made with:
HTMLCSSJavaScript (jquery.js)

About a code

Popup overlay using HTML and CSS and JavaScript.

demo and code

Learn More

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Let's craft a visual identity that ignites passion and loyalty. ✨