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
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Giant Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pop-up without JavaScript
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Window / Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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 (SCSS)
About a code
CSS Only Popup
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 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.