I'm currently working on developing a Pure CSS3 Modal.
However, I encountered two issues along the way:
- The background doesn't change to transparent black color when the modal is clicked. This is a common feature in modals where it forces the background to become a transparent color. See screenshots for reference:
- I've been contemplating how I can implement a 3D Flip Horizontal Animation or create a smooth rotation effect instead of the plain top-to-bottom movement for the modal transition.
Here's the HTML code snippet:
<p><a href="#modal" class="btn go">Display Modal</a></p>
</div>
<div id="modal">
<div class="modal-content">
<h1>What is a modal?</h1>
<div class="copy">
<p>A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. It is commonly associated with an Internet Web site pop-up window that stays in front of the original window. A user may not press any controls or enter any information on the parent window (the original window which opened the modal) until the modal has been closed.</p>
</div>
<a href="#" class="btn">Close Modal</a>
<div class="overlay"></div>
</div>
</div>
And here are the stylesheet codes:
.container {
width:50%;
margin:90px auto
}
#modal {
background:#97d2f1;
left:50%;
top:-50%;
width:80%;
padding: 20px;
margin:-250px 0 0 -40%;
position:absolute;
color: #fff;
visibility: hidden;
box-shadow:0 3px 7px rgba(0,0,0,.25);
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top:50%;
visibility: visible;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 10;
}
.btn {
padding:0 3em;
outline:none;
border:none;
color:#fff;
text-transform:uppercase;
font-weight:700;
letter-spacing:1px;
font-size:1em;
line-height:4;
overflow:hidden;
border-radius:5px;
background:rgba(0,0,0,0.2);
text-align:center;
cursor:pointer;
margin:20px auto;
display:block;
width: 30%;
margin-top: 40px;
}
Check out my JS FIDDLE link for live demo: http://jsfiddle.net/agx4w5pm/1/
If you have suggestions on improving my JSFIDDLE code, it would be greatly appreciated!
Thank you in advance for your assistance!