Minimal Fullscreen Modal Library In Pure CSS – modal.css

Category: CSS & CSS3 , Modal & Popup | August 31, 2017
Author: matthew-conrad
Views Total: 1,423
Official Page: Go to website
Last Update: August 31, 2017
License: MIT

Preview:

Minimal Fullscreen Modal Library In Pure CSS – modal.css

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>

You Might Be Interested In:


Leave a Reply