CSS Only Responsive Modal Window – Light Modal

Preview:

Description:

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
      </div>
  </div>
</div>

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
</div>

Changelog:

10/11/2018

• Added Gallery mode