Author: | pedrolaxe |
---|---|
Views Total: | 44,527 views |
Official Page: | Go to website |
Last Update: | July 30, 2018 |
License: | MIT |
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
Thanks for Using my Script :)
hi, which link Github ?
New Version on Github!
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?
I added this to the script and it worked for me.
#modal:close {
position: absolute;
top:50%
opacity: 1;
}
Thanks for the code and the links above. All of them work properly.
It doesn’t fit in the viewport when it’s anything less than 500px heigh
how do i make this load once the page is opened?