Tutorial: POP-UP BOXES (v.2) CSS

Paste the following code under <style type="text/css">:

/*----- POP UP BOX by borntobewildcodes -----*/

/* You can change the placement of this box and set position value to fixed */

#popup_button{
position:fixed;
margin-top:50px;
margin-left:50px;
width:30px;
height:30px;
padding:5px;
background:#fff;
border:1px solid #eee;
border-radius:2px;
text-align:center;
line-height:30px;
overflow:hidden;
z-index:10000;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

#popup_button span{
font-size:12px;
color:#444;
}

#popup_button:hover span{
color:#000;
}

#open{
position:absolute;
width:30px;
height:30px;
}

#close{
position:absolute;
width:30px;
height:30px;
z-index:10;
display:none;
}


/* Pop-up box */

#popup_box{
position:fixed;
top:50%;
left:50%;
padding:30px 40px;
width:520px;
height:auto;
background:#ffffff;
border:1px solid #eee;
z-index:10000;
overflow:hidden;
display:none;
color:#222222;
font-size:15px;
line-height:25px;
text-align:justify;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}

#shadow{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:1000;
background:rgba(0,0,0,0.7);
display:none;
}