how to make pop up with dimmer close - popup

Question

<div>
<style>
.dim {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:1 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
.wrapper {
width: 100%;
top: 0px;
left: 0px;
position: absolute;
z-index: 5;
display: block;
}
.popup { width: 400px;
height: 200px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
border: 1px solid #ccc;
color: #333;
}
</style>
<div class="dim"></div>
<div class="wrapper">
<div class="popup">
Subscribe box</div>
</div>
</div>
here's the code I actually got from another post and it makes the pop up for the most part and it dims the screen but it doesn't close or have a close button so there's no way of closing it once it's opened. so add a close button?

Answer 1

Your going to have to do a little JavaScript to get this to work, so that the code can detect the click event on the close button. I have previously used Colorbox to handle popups as it has quite a large number of features and is well documented, although you could also create your own using CSS3 and use javascript to add or remove a class.
Something like:
<style>
#basicElement {
/* style here */
}
#basicElement.open {
/* style here */
animation: popup 25s linear;
-moz-animation: popup 25s linear;
-ms-animation: popup 25s linear;
-o-animation: popup 25s linear;
-webkit-animation: popup 25s linear;
}
#basicElement.closed {
/* style here */
animation: popup 25s linear;
-moz-animation: popup 25s linear;
-ms-animation: popup 25s linear;
-o-animation: popup 25s linear;
-webkit-animation: popup 25s linear;
animation-direction: reverse;
-moz-direction: reverse;
-ms-direction: reverse;
-o-direction: reverse;
-webkit-direction: reverse;
}
#-webkit-keyframes popup {
0% {
background-size: 100% 100%;
}
100% {
background-size: 130% 130%;
background-position: center bottom;
}
}
</style>
<script>
$('#open').click(function (){ $(this).removeClass('closed').addClass('open'); });
$('#close').click(function (){ $(this).removeClass('open').addClass('closed'); });
</script>