CSS Only Responsive Modal Window – Light Modal

Category: CSS & CSS3 , Modal & Popup , Recommended | October 11, 2018
Views Total:6,181 views
Official Page:Go to website
Last Update:October 11, 2018


CSS Only Responsive Modal Window – Light Modal


Light Modal is a lightweight (2kb minified) CSS library to create responsive, customizable, CSS3 animated modal windows with no dependency.

How to use it:

Include the minified version of the Light Modal in the head of the document.

<link rel="stylesheet" href="dist/css/light-modal.css">

Include Animate.css for more fancy CSS3 animations when the modal window opens and closes.

<link rel="stylesheet" href="/path/to/animate.min.css">

Create the modal content as follows:

<div class="light-modal" id="demo-modal" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
  <div class="light-modal-content animated zoomInUp">
      <img src="demo.jpg" alt="from unsplash">
      <a href="#" class="light-modal-close-icon" aria-label="close">&times;</a>
      <div class="light-modal-caption">
        Lightbox Caption Here

Create a link to toggle the modal window.

<a href="#demo-modal">Open Modal</a>

Change the default open/close animations by overring the CSS classes in the modal content.

<div class="light-modal-content animated zoomInUp">
  ... Modal Content Here



  • Added Gallery mode

You Might Be Interested In:

One thought on “CSS Only Responsive Modal Window – Light Modal

  1. Edwin Adeola Oluwasina

    Hi Admin,
    It is not popping up. it is not showing any error either

    Kindly help.


Leave a Reply