Minimal Pure CSS Responsive Modal Box – modalcss


Author: pedrolaxe
Views Total: 17,808 views
Official Page: Go to website
Last Update: July 30, 2018
License: MIT

Preview:

Minimal Pure CSS Responsive Modal Box  – modalcss

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

See also  Pure CSS3 Tab Effects | CSS Script

Leave a Reply

Your email address will not be published. Required fields are marked *