Image popup on page

<!-- popup -->
<style type="text/css">
#popupped {
  z-index: 1000;
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-160%, -90%);

  width: 40%;
  height: 50%;
}
#blackscreen {
    width: 100%;
    height: 100%;
    margin: 0em;
    left: 0em;
    top: 0em;
    background: rgba(255, 255, 255, 0.93);
    position: fixed;
        z-index: 999;
}
#popupped #lnk {
    color: #111;
    text-decoration: none;
    font-family: Verdana,Arial,Sans-serif;
    font-size: 10px;
}

#popupped #lnk img {
    height: 20px;
        max-width: 100%;
}
</style>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#popupped #lnk,#blackscreen").click(function(e) {
            e.preventDefault();
            jQuery("#blackscreen,#popupped").fadeOut();
        });
    });
</script>
<div id="blackscreen"> </div>
<div id="popupped"><a id="lnk" href="#"> <img src="http://cdn.ninhodaroxinha.com.br/reveillon/close.png" border="0" /> clique para fechar </a> <a id="mainlnk" href="http://www.ninhodaroxinha.com.br/reservas/" target="_blank"> <img src="http://cdn.ninhodaroxinha.com.br/namorados/namorados.png" border="0" alt="Dia dos Namorados no Ninho da Roxinha. Clique para saber mais." title="" /> </a></div>
<!-- /popup -->