Código HTML:
Ver original<!DOCTYPE html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> *{padding:0;margin:0}
.miclase {
background:url("../images/trans.png");
height:3000px;
position:fixed;
width:100%;
z-index:20;
display:none;
}
#mostrar, #cerrar{
background:#f60;
border-radius:10px 10px 10px 10px;
width:100px;
text-align:center;
color:#fff;
font-weight:bold;
font-family:Calibri;
cursor:pointer;
}
<script language="javascript"> $(document).ready(function(){
$("#mostrar").click(function(){$("#popup").fadeIn("slow")})
$("#cerrar").click(function(){$("#popup").fadeOut();})
})
<div id="popup" class="miclase"> <div style="width:500px;margin:10% auto;background-color:#f60;"> <div style="background-color:#333;width:120px;" id="cerrar">Cerrar
</div> <div id="mostrar">Ver Popup
</div>