Do you need a modal popup on your website when a user clicks a link or button? We typically see these in use for logins, newsletter signups, advertising, and more. Most often they are created using a bit of JavaScript trickery, but these days they can relatively easily be coded with only CSS. In this post we’ll show you 15 examples of various ways this can be accomplished. Let’s have a look!

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets

Starting at only $16.50 per month!


DOWNLOAD NOW

CSS Responsive Modal

This responsive example adjusts to the browser size and goes full screen on smaller devices.

See the Pen

CSS Responsive Modal by Thom Griggs (@thomgriggs)

on CodePen.0

CSS Modal

This example includes some smooth animations on open and close actions.

See the Pen

CSS Modal by Pete Nawara (@petebot)

on CodePen.0

CSS Modal :target Selector

A clever use of the :target selector to open a popup simply by toggling it’s opacity.

See the Pen

CSS Modal :target Selector by Jake Albaugh (@jakealbaugh)

on CodePen.0

Pure CSS Modal Box

Interesting use of labels and inputs to create a modal popup.

See the Pen

Pure CSS modal box by Kasper Mikiewicz (@Idered)

on CodePen.0

Pure CSS Modal

A really nice animation to open a full screen modal popup.

See the Pen

Pure CSS Modal by Mark Holmes (@SMLMRKHLMS)

on CodePen.0

Pure CSS Modal Popup

Another use of a label and input to utilize the checked state to show the modal.

See the Pen

Pure CSS modal by Austin Lord (@ohnoitsaustin)

on CodePen.0

Pure CSS Modals

Four different entry and exit animations are shown in this example.

See the Pen

Pure CSS Modals by Akshay (@akzhy)

on CodePen.0

Pure CSS Modal

Smooth animations highlight this example.

See the Pen

Pure CSS Modal – #15 by Ivan Grozdic (@ig_design)

on CodePen.0

Three CSS Modals

Three variations of background opacity are in this example.

See the Pen

CSS Modals (Modal v2) by Abubaker Saeed (@AbubakerSaeed)

on CodePen.0

CSS3 Modal Example

This modal popup slides up when it’s opened.

See the Pen

css3 modal example by Felipe Nunes (@willpower)

on CodePen.0

Pure CSS Modal window / Login & Sign up / Tabs / All Responsive

There is a LOT going on with this one, including tabs on the modal popup and responsive design throughout.

See the Pen

Pure CSS Modal window / Login & Sign up / Tabs / All Responsive by Andrew (@AndrewBeznosko)

on CodePen.0

CSS Modal

Another example using the :target selector, with a slide down modal entrance.

See the Pen

Css Modal by Jon Ander Pérez (@JonAnderDev)

on CodePen.0

Pure CSS modal dialog with sliding content

A somewhat simple setup, but with a content slider in it.

See the Pen

Pure CSS Modal + Slider by Marvin Orendain (@marv117)

on CodePen.0

CSS Modal Boxes for all browsers

A version that goes deep into older browser support.

See the Pen

CSS Modal Boxes for all browsers by Patrick (@cara-tm)

on CodePen.0

Modal (CSS Only)

For our final selection, we have a pretty standard modal popup with a smooth animated entrance and exit.

See the Pen

Modal (CSS only) by Simon (@Index)

on CodePen.0

By: Editorial Team
Title: 15 Modal / Popup Windows Created With Only CSS
Sourced From: 1stwebdesigner.com/15-modal-popup-windows-created-with-only-css/
Published Date: Tue, 10 May 2022 09:09:49 +0000

Did you miss our previous article…
https://www.webdesignhawks.com/?p=6577