serenevenkiy,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#bg_popup{
background: rgba(0, 0, 0, 0.7);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99;
}
#popup h2{
margin-bottom: 25px;
text-align: center;
}
#popup {
background:#fff;
border-radius: 10px;
left: 0;
margin-left: auto;
margin-right: auto;
padding: 25px 25px 60px 25px;
position: absolute;
right: 0;
top: 25%;
width: 575px;
z-index: 101;
}
.close {
color: #222;
cursor:pointer;
display:block;
height:20px;
position:absolute;
right:5px;
top:5px;
width:20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = +localStorage.xxx || 0;
3 > a && (localStorage.xxx = ++a, $("#bg_popup").show().on("click", function(a) {
($(a.target).closest(".close").length || a.target == this) && $("#bg_popup").hide()
}))
});
</script>
</head>
<body>
<div id="bg_popup">
<div id="popup">
<a id="setCookie" class="close" href="#" title="Close" onclick="">
<i class="fa fa-times" aria-hidden="true">X</i>
</a>
<h2>Hello!</h2>
<p>Hello, my name is Nik.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eos architecto maiores ut dolorem esse voluptate saepe doloribus facere eligendi velit rerum, harum, tempora voluptatibus sed natus voluptatem quos iusto.
</p>
</div>
</div>
</body>
</html>