如何使弹出窗口只出现在主页上

Question

我有一个年龄验证弹出窗口，第一次访问网站时就会出现。验证年龄后，弹出窗口消失。我如何使这个弹出窗口只出现在主页上，而不出现在任何其他页面上？我需要在下面的脚本中添加一些内容吗？

非常感谢您的帮助。

JS如下：

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script> jQuery(document).ready(function($){


if (sessionStorage.getItem('advertOnce') !== 'true') {
//Show Box on Start-Up
$('.box').show();
$('.overlay-verify').show();
}else{
$('.box').hide();
$('.overlay-verify').hide();
}

//Enter Button
$('#refresh-page').on('click',function(){
$('.box').hide();
$('.overlay-verify').hide();
sessionStorage.setItem('advertOnce','true');
});
//Exit Button
$('#reset-session').on('click',function(){
$('.box').show();
sessionStorage.setItem('advertOnce','');
});
});

</script>
<link href='https://fonts.googleapis.com/css?family=Raleway:600,900,400' rel='stylesheet' type='text/css'>
<main>
<article class="box">
<div class="box-left">
<img src="https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efc646a19c9962072e60679/1593599082426/SBR_centered+copy+-+white.png">
</div>
<div class="box-right">
<h3>Welcome</h3>
<p>By clicking enter, I certify that I am over the age of 18.</p>

<a href="#" class="btn btn-alpha"  id="refresh-page">ENTER</a>

<span>OR</span>

<a href="javascript:history.back()" class="btn btn-beta" id="reset-session">EXIT</a>

<small>Always enjoy responsibily.</small>
</div>
</div>
</article>

<div class="overlay-verify"></div>
</main>

Answer 1

尝试在脚本中使用window.location.pathname，例如：

if (sessionStorage.getItem('advertOnce') !== 'true' && window.location.pathname == "/") {
$('.box').show();
$('.overlay-verify').show();
}

现在，这将只在索引[/]上执行-您也可以更改条件以适用于另一个页面名称：if(window.location.pathname == "/home.html")

Answer 2

也许你可以创建一个存储年龄的cookie，如果这个cookie已经存在，就不要执行代码，当这个cookie不存在时，就执行代码