Author: | davidicus |
---|---|
Views Total: | 24,335 views |
Official Page: | Go to website |
Last Update: | March 5, 2015 |
License: | MIT |
Preview:

Description:
A responsive, fullscreen, fully accessible modal popup built with HTML/CSS/CSS3. All CSS. No JavaScript required.
How to use it:
Create the content for the modal, and use label, checkbox trick to launch a modal window.
<div class="modal"> <input id="modal" type="checkbox" name="modal" tabindex="1"> <label for="modal" >Launch Modal</label> <div class="modal__overlay"> <div class="modal__box"> <label for="modal">✖</label> <h2>Modal Title</h2> <p>Modal Content</p> </div> </div> </div>
The required CSS/CSS3 style rules for the modal popup.
.modal { display: block; padding: 0 1em; text-align: center; width: 100%; } @media (min-width: 43.75em) { .modal { padding: 1em 2em; text-align: right; } } .modal > label { background: #000; border-radius: .2em; color: #FFDE16; cursor: pointer; display: inline-block; font-weight: bold; margin: 0.5em 1em; padding: 0.75em 1.5em; -webkit-transition: all 0.55s; transition: all 0.55s; } .modal > label:hover { -webkit-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); } .modal input { position: absolute; right: 100px; top: 30px; z-index: -10; } .modal__overlay { background: black; bottom: 0; left: 0; position: fixed; right: 0; text-align: center; top: 0; z-index: -800; } .modal__box { padding: 1em .75em; position: relative; margin: 1em auto; max-width: 500px; width: 90%; } @media (min-height: 37.5em) { .modal__box { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -80%); -ms-transform: translate(-50%, -80%); transform: translate(-50%, -80%); } } @media (min-width: 50em) { .modal__box { padding: 1.75em; } } .modal__box label { background: #FFDE16; border-radius: 50%; color: black; cursor: pointer; display: inline-block; height: 1.5em; line-height: 1.5em; position: absolute; right: .5em; top: .5em; width: 1.5em; } .modal__box h2 { color: #FFDE16; margin-bottom: 1em; text-transform: uppercase; } .modal__box p { color: #FFDE16; text-align: left; } .modal__overlay { opacity: 0; overflow: hidden; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); } input:checked ~ .modal__overlay { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1); z-index: 800; } input:focus + label { -webkit-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); }
Curious if there is any way to have multiple modal popups per page. Currently I have 6 boxes but each pops up with the same content. Thanks!
Good question Tyler. I’m looking for the same feature. Have you had any luck finding a solution? Thanks.
I found this… http://stackoverflow.com/questions/32197510/show-different-content-in-multiple-css-popups
I would like to ask how to scroll the contents. I plugged CSS STYLE into class .modal__box overflow-y:auto but it doesn’t work. Have anyone a suggestion?
Hello. May I use your code on my shop website for a commercial use? Thank you very much. -M.Y
Hi! Im using your code and it works perfect, but I’m having an issue.
Inside the modal I have a filter module with several checkboxes and when I click one of the checkboxes the modal simply closes. Can you help me how to fix this? Thank you very much, I’ll apprecitate it a lot.