CSS:
body {
min-height: 100vh;
}
.modal {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
z-index: 1;
display: none;
}
HTML:
<body>
<div class="modal">PopUp!</div>
</body>
JavaScript:
function setCookie(name, value, expY, expM, expD, path, domain, secure) {
var cookieString = name + "=" + escape(value);
if (expY) {
var expires = new Date(expY, expM, expD);
cookieString += "; expires=" + expires.toGMTString();
}
if (path) {
cookieString += "; path=" + escape(path);
}
if (domain) {
cookieString += "; domain=" + escape(domain);
}
if (secure) {
cookieString += "; secure";
}
document.cookie = cookieString;
}
function getCookie(cookieName) {
var results = document.cookie.match('(^|;) ?' + cookieName + '=([^;]*)(;|$)');
if (results) {
return (unescape(results[2]));
}
return null;
}
$(function () {
if (getCookie("is_shown_modal") != "1") {
$(".modal").fadeIn(500, function () {
setCookie("is_shown_modal", "1");
});
}
});
