15 Modal / Popup Windows Created With Only CSS

Do you wish a modal popup in your website when a user clicks a link or button? We typically see these in use for logins, newsletter signups, promoting, and more. Most frequently they’re created using a little bit of JavaScript trickery, but as of late they’ll relatively easily be coded with only CSS. On this post we’ll show you 15 examples of varied ways this will be achieved. Let’s take a look!

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per 30 days!


 

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 instance includes some smooth animations on open and shut actions.

See the Pen
CSS Modal
by Pete Nawara (@petebot)
on CodePen.0

 

CSS Modal :goal Selector

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

See the Pen
CSS Modal :goal 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 extremely 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

One other use of a label and input to utilize the checked state to indicate the modal.

See the Pen
Pure CSS modal
by Austin Lord (@ohnoitsaustin)
on CodePen.0

 

Pure CSS Modals

4 different entry and exit animations are shown in this instance.

See the Pen
Pure CSS Modals
by Akshay (@akzhy)
on CodePen.0

 

Pure CSS Modal

Smooth animations highlight this instance.

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 instance.

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 & Enroll / Tabs / All Responsive

There’s a LOT happening with this one, including tabs on the modal popup and responsive design throughout.

See the Pen
Pure CSS Modal window / Login & Enroll / Tabs / All Responsive
by Andrew (@AndrewBeznosko)
on CodePen.0

 

CSS Modal

One other example using the :goal 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 easy 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 now a fairly standard modal popup with a smooth animated entrance and exit.

See the Pen
Modal (CSS only)
by Simon (@Index)
on CodePen.0

 

This post may contain affiliate links. See our disclosure about affiliate links here.

Leave a Reply

Your email address will not be published.