Minimal Pure CSS Responsive Modal Box – modalcss

Preview:

Description:

modalcss is an ultra-light CSS solution to create a simple, responsive modal window with CSS3 animations. Based on pure CSS and plain html structure, without the need to write any checkbox or radio button tricks used in other pure CSS modal solutions.

How to use it:

Create a modal with a fullscreen overlay as displayed below.

<div id="modal">
  <div class="modal-content">
    <div class="header">
      <h2>Modal Header</h2>
    </div>
    <div class="copy">
      <p>Modal Body</p>
      <a href="#">Close Link</a> </div>
  </div>
  <div class="overlay"></div>
</div>

Create a link to toggle the modal.

<a href="#modal">
  Launch A Modal
</a>

The core modal styles and use CSS :target selector to enable the modal.

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

#modal:target {
  opacity: 1;
  top: 50%;
  visibility: visible
}

Custom CSS styles for the modal content.

#modal .header, #modal .footer {
  border-bottom: 1px solid #1ABC9C;
  border-radius: 5px 5px 0 0
}

#modal .footer {
  border: none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px
}

#modal h2 {
  margin: 0;
  color: #fff
}

#modal .btn { float: right }

#modal .copy, #modal .header, #modal .footer {
  padding: 10px;
  color: #fff
}

.modal-content {
  background: #34BC9D;
  position: relative;
  z-index: 20;
  border-radius: 5px;
  color: #fff
}

#modal .copy { background: #46CFB0 }

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

.copy a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #E74C3C;
}

Changelog:

07/30/2018

• Fix Identation