5 CSS Modals

November 26, 2017 No comments CSS Code Examples CSS Modals

Modal windows are a GUI elements use to showcase important information to end users. When opened, all website content are put to the background. User must interact with modal window before they can return to the parent application. Modal popups are typically use for user awareness or to ask for comfirmation of some action. In this collection we present the best free CSS and HTML modal windows crafted with nice animations and other effects.

Simple Confirmation Popup

Simple confirmation popup
Demo Image: Simple Confirmation Popup
Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.
Made by Adventures in Missions on July 02, 2014
demo and code

No JS modal popup window

No js modal popup window
Demo Image: No JS modal popup window
Using the ol' label, checkbox trick to launch a modal window. All CSS. No JavaScript required.
Made by David Conner on March 04, 2015
demo and code

Nifty Modal Window or Slider Effects

Nifty modal window with slider effects
Demo Image: Nifty Modal Window or Slider Effects
Nifty Modal Window or Slider Effects
Made by coldarif on April 22, 2014
demo and code
Modal animation physics
Demo Image: Modal Animation Physics
Messing around with keyframe/transition physics for a modal.
Made by Tey Tag on October 09, 2014
demo and code

Flat Modal Window

Flat modal window
Demo Image: Flat Modal Window
Made by Dronca Raul on July 07, 2016
demo and code
{{ message }}

{{ 'Comments are closed.' | trans }}