【发布时间】：2020-07-07 19:47:00
【问题描述】：
我对 JavaScript 不是很有经验，我正在尝试为 Square Space 网站设置年龄验证弹出窗口。我在使用是/否按钮功能时遇到了问题，我不知道如何让它们工作。这个想法是，当单击“是”时，弹出窗口消失，并且在该会话的其余部分中记住该选择。单击“否”时，站点退出。非常感谢任何帮助。
我将以下代码粘贴到站点范围的标头代码注入中：
jQuery(document).ready(function($) {
if (sessionStorage.getItem('advertOnce') !== 'true') {
//sessionStorage.setItem('advertOnce','true');
$('.box').show();
} else {
$('.box').hide();
};
$('#btn-alpha').click(function() {
sessionStorage.setItem('advertOnce', 'true');
$('.box').hide();
});
$('#btn-beta').click(function() {
window.location.href = 'http://google.com/';
});
});/*----------------------------------------------
-Defualt to border-box
----------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-family: helvetica;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: 400;
font-family: Raleway;
line-height: 1.4;
}
/*----------------------------------------------
--Fluid body sizing
----------------------------------------------- */
body {
font-size: 100%;
}
@media (min-width: 32em) {
body {
font-size: 110%;
}
}
@media (min-width: 54em) {
body {
font-size: 111%;
}
}
@media (min-width: 74em) {
body {
font-size: 115%;
}
}
@media (min-width: 96em) {
body {
font-size: 135%;
}
}
a.btn {
background-color: #e3c827;
color: #000;
text-decoration: none;
display: inline-block;
letter-spacing: 0.1em;
padding: 0.5em 0em;
}
a.btn.btn-beta {
background-color: #800000;
}
.overlay-verify {
background: #000;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.box {
background: #fff;
position: relative;
left: 0;
right: 0;
top: 20%;
bottom: 0;
margin: 0 auto;
z-index: 9;
width: 70%;
height: 40%;
display: table;
}
.box .box-left,
.box .box-right {
width: 100%;
position: relative;
text-align: center;
padding: 5%;
}
@media (min-width: 54em) {
.box .box-left,
.box .box-right {
display: table-cell;
vertical-align: middle;
width: 50%;
}
}
.box .box-left p,
.box .box-right p {
position: relative;
z-index: 3;
}
.box .box-left {
background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
background-size: cover;
}
.box .box-left img {
position: relative;
z-index: 1;
width: 9em;
}
.box .box-left:after {
content: '';
position: relative;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.box .box-right {
background-color: #000000;
text-align: center;
}
.box .box-right h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid #eee;
padding-bottom: 1em;
margin: 0 auto;
}
.box .box-right p {
color: #fff;
}
.box .box-right small {
color: #fff;
}
.box .box-right .btn {
font-weight: 600;
letter-spacing: 0.2em;
padding: 0.9em 1em 0.7em;
margin: 1em auto;
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main>
<article class="box">
<div class="box-left">
</div>
<div class="box-right">
<h3>Age Verification</h3>
<p>This site requires you to be 21 years or older to enter. </p>
<p>By clicking 'YES', I certify that I am 21 years or older.</p>
<a href="#" class="btn btn-alpha" id="refresh-page">YES</a>
<a href="#" class="btn btn-beta" id="refresh-page">NO</a>
</div>
</article>
<div class="overlay-verify"></div>
</main>【问题讨论】：
-
您能否解释一下 Java 与这个问题的关系？我不明白。
-
具有相同 ID 的两个按钮肯定没有帮助。
-
Java 之于 javascript 就像汽车之于地毯一样 - 本质上是一个玩具，专为编写小段代码而设计，传统上被缺乏经验的程序员使用和滥用。另一种是用于网络浏览器的脚本语言。
-
其实，你为什么需要它记住“是”？您所需要的只是您的“是”和“否”按钮。单击“否”后，您运行代码以退出网站。如果单击“是”，则只需将它们作为
<a href="test.html">创建的纯链接带到您的主页或任何页面。您是否有理由需要记住“是”已被点击？ -
@Gosi，我担心的是，只要用户导航回主页，年龄门就会再次弹出。
标签： javascript jquery html css