15 Modal / Popup Windows Created With Only CSS

Original Source: https://1stwebdesigner.com/15-modal-popup-windows-created-with-only-css/

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