Edit in JSFiddle

// mostra il popup dopo 2k millisecondi (2secondi)
setTimeout(
    function() {
    	console.log("run");
      document.getElementById('pop').style.display="block"	;
   	}, 2000);


// chiudi il pupup quando clicchi sulla X
document.getElementById("close").onclick = function(e){
    document.getElementById('pop').style.display="none";
}

// chiudi il popup quando clicchi sullo sfondo nero
document.getElementById("pop").onclick = function(e){
	document.getElementById('pop').style.display="none";	
}
<!DOCTYPE html>
<html>
<head>
	<title>Guida popup con html e JS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Una pagina esempio</h1>
<div class="overlay" id="pop">
	<div class="popup">
		<h2>Questo è un popup</h2>
		<p>Potete utilizzarmi per inserire pubblicità</p>
		<p>o per fare un annuncio</p>
		<span id="close">X</span>
	</div>
</div>

<script src="app.js"></script>
</body>
</html>
body{
	background: #2ecc71;
  color: #fff;
  text-align: center;
}

.popup{
	width: 200px;
	height: 400px;
	background: #fefefe;
	margin: 40px auto;
	padding: 10px 20px;
	position: relative;
	color: #333;
}

.overlay{
	position: fixed; /* schermo intero*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  height: 100vh;
	background: rgba(0,0,0,0.7); /* colore sfondo e opcità */
	text-align: center;
	display: none; /*cambiaremo in display: none*/
}

#close{
	position: absolute;
	top: -20px;
	right: -20px;
	color: #fff;
}

#close:hover{
	cursor: pointer;
}