#thover{
  position:absolute;
  background:#000;
  width:100%;
  height:100%;
  opacity: 0.5
}
 
#tpopup{
  
  position: relative;
  width:1000px;
  height:100%;
 
  background: rgba(0,0,0,0.5);
  
  left:50%;
  top:50%;
  border-radius:5px;
  padding:0px 0;
  margin-left:-520px; /* width/2 + padding-left */
  margin-top:-150px; /* height/2 + padding-top */
  text-align:center;
  box-shadow:0 0 10px 0 #000;
  display: inline-block;
}
#tclose{
  position:absolute;
  background:black;
  color:white;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:8px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
  box-shadow:0 0 10px 0 #000;
}
Add these on JS file. just create a file like popup.js and add the file on your html page before </head> tag: like this: <script src="popup.js"></script>

$(document).ready(function(){
  
  $("#thover").click(function(){
		$(this).fadeOut();
    $("#tpopup").fadeOut();
	});
  
  
  $("#tclose").click(function(){
		$("#thover").fadeOut();
    $("#tpopup").fadeOut();
	});
  
});