Minimal Fullscreen Modal Library In Pure CSS – modal.css

Preview:

Description:

A pure CSS modal library which helps you display a fullscreen modal window with CSS3 animations on the screen.

How to use it:

Insert the style sheet modal.css into the html document.

<link rel="stylesheet" href="modal.css">

Create the modal content & trigger element as these:

<div class="modal">
  <input id="modal__trigger" type="checkbox">
  <label for="modal__trigger">Launch Modal</label>
  <div class="modal__overlay">
    <div class="modal__wrap">
      <label for="modal__trigger">&#10006;</label>
      <h2>This is your modal content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p> 
      
    </div>
  </div>
</div>