The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!
This responsive example adjusts to the browser size and goes full screen on smaller devices.
This example includes some smooth animations on open and close actions.
A clever use of the
:target selector to open a popup simply by toggling it’s opacity.
Interesting use of labels and inputs to create a modal popup.
A really nice animation to open a full screen modal popup.
Another use of a label and input to utilize the checked state to show the modal.
Four different entry and exit animations are shown in this example.
Smooth animations highlight this example.
Three variations of background opacity are in this example.
This modal popup slides up when it’s opened.
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)
Another example using the
:target selector, with a slide down modal entrance.
A somewhat simple setup, but with a content slider in it.
A version that goes deep into older browser support.
For our final selection, we have a pretty standard modal popup with a smooth animated entrance and exit.
This post may contain affiliate links. See our disclosure about affiliate links here.