Animated HTML5/CSS3 Only Modal Window

A lightweight and easy-to-use solution to create sleek, modern, animated modal windows using only HTML and CSS3. It is a great choice for developers who want to avoid using JavaScript.

How to use it:

1. Load the necessary modal.css stylesheet in the document.

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

2. Add your modal window to the page.

<div id="modal">
  <!-- Modal Body -->
  <div class="modal-content">
    <div class="header">
      <h2>Modal Heading</h2>
    </div>
    <div class="copy">
      <p>Modal Content</p>
    </div>
    <div class="cf footer">
      <a href="#" class="btn">Close</a>
    </div>
  </div>
  <!-- Background Overlay -->
  <div class="overlay"></div>
</div>

3. Create a link to launch the modal window.

<a href="#modal">Activate Modal</a>

4. Override the default styles of the modal window.

#modal {
  left:50%;
  margin:-250px 0 0 -40%;
  opacity: 0;
  position:absolute;
  top:-50%;
  visibility: hidden;
  width:80%;
  box-shadow:0 3px 7px rgba(0,0,0,.25);
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

5. Override the default styles of the background overlay.

#modal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}