Minimal Pure CSS Responsive Modal Box – modalcss

Category: CSS & CSS3 , Modal & Popup | July 30, 2018
Author: pedrolaxe
Views Total: 10,116
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

  • Fix Identation

7 thoughts on “Minimal Pure CSS Responsive Modal Box – modalcss

  1. Hamy Ng

    Hello! Love your modal. Except when I close it, my page jumps up to the top, which is annoying because i have to scroll all the way down again. Is there a way to fix this?

    Reply
    1. Atma Svarupa

      I added this to the script and it worked for me.

      #modal:close {
      position: absolute;
      top:50%
      opacity: 1;
      }

      Reply
  2. Felix Eve

    It doesn’t fit in the viewport when it’s anything less than 500px heigh

    Reply

Leave a Reply