在 Stack Overflow 上提出几个问题让我的 jQuery 弹出窗口存储 cookie 并且不再显示后,我在我的网页上留下了一个框,位于标题中网站其余部分的上方,它将网站推到页面下方。我似乎无法弄清楚为什么它没有在页面上显示为弹出窗口,在实现使用 cookie 之前它会覆盖在页面上并阻止用户与页面交互。
function setCookie(cname, cvalue) {
window.document.cookie = cname + "=" + cvalue;
}
function getCookie(cname) {
var ca = decodeURIComponent(document.cookie).split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim().split('=');
if (cname == c[0] && c.length > 1) {
return c[1];
}
}
return "";
}
function checkCookie() {
if (getCookie("ageverification") == "") {
$('#popup, #overlay').show();
$('#popup a.close').click(function(event) {
event.preventDefault();
$('#popup').hide();
setCookie("ageverification", 'true');
});
$('#popup a.goBack').click(function(event) {
event.preventDefault();
goBack();
});
} else {
return null;
}
}
function goBack() {
window.history.go(-2);
}
$(function() {
checkCookie();
});
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a {
text-decoration: none;
}
.popup {
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223 {
min-width: 300px;
width: 300px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p {
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a {
color: #d91900;
font-weight: bold;
}
.cnt223 .x {
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover {
cursor: pointer;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='popup' style="display:none">
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
You must be over 18 to purchase products containing nicotene, or nicotene related products!
<br />
<br />
<a href='' class='close' style="color:green">I am 18+</a>
<a href='' class='goBack' style="color:red">I am under 18</a>
</p>
</div>
</div>
<script>
</script>
最佳答案
您只想显示一次消息。
您需要使用 javascript sessionStorage
函数来完成此操作。
The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.
The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed).
例子如下:
$(function () {
if (!sessionStorage.getItem('firstVisit') == "1") {
$("#popup").show();
sessionStorage.setItem('firstVisit', '1');
}
$('#popup a.close').click(function (event) {
$('#popup').hide();
});
});
function goBack() {
window.history.go(-2);
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a {
text-decoration: none;
}
.popup {
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223 {
min-width: 300px;
width: 300px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p {
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a {
color: #d91900;
font-weight: bold;
}
.cnt223 .x {
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover {
cursor: pointer;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='popup' style="display:none">
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
You must be over 18 to purchase products containing nicotene, or nicotene related products!
<br />
<br />
<a href='' class='close' style="color:green">I am 18+</a>
<a href='' class='goBack' style="color:red">I am under 18</a>
</p>
</div>
</div>
关于javascript - 在弹出窗口中使用 cookie 后弹出窗口不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52344279/