The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design AssetsStarting at only $16.50 per month!
CSS Responsive Modal
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.
CSS Modal :target Selector
A clever use of the :target selector to open a popup simply by toggling it’s opacity.
Pure CSS Modal Box
Interesting use of labels and inputs to create a modal popup.
Pure CSS Modal
A really nice animation to open a full screen modal popup.
Pure CSS Modal Popup
Another use of a label and input to utilize the checked state to show the modal.
Pure CSS Modals
Four different entry and exit animations are shown in this example.
Pure CSS Modal
Smooth animations highlight this example.
Three CSS Modals
Three variations of background opacity are in this example.
CSS3 Modal Example
This modal popup slides up when it’s opened.
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
Another example using the :target selector, with a slide down modal entrance.
Pure CSS modal dialog with sliding content
A somewhat simple setup, but with a content slider in it.
CSS Modal Boxes for all browsers
A version that goes deep into older browser support.
Modal (CSS Only)
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.