15 Modal / Popup Windows Created With Only CSS

Tutorials & tips on Web Development & Web Design.

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

 

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

The above article “15 Modal / Popup Windows Created With Only CSS” was 1st provided here.

I hope that you found the post above useful and/or interesting. Similar content can be found on our blog: blog.hostfast.com/blog
Please let me have your feedback below in the comments section.
Let us know what subjects we should write about for you in future.