我正在设计一个网站并出现一个弹出窗口。弹出窗口按照我的意愿运行,在访问页面时出现,在弹出窗口顶 Angular 按下“x”时消失。但是,我希望弹出窗口在被“删除”后消失(对于该 session )。经过一些调查,我发现 session 存储是执行此操作的方法。我试过使用 session 存储,但我无法让它工作。我是 Java Script 的新手,所以请公开我糟糕的代码。
HTML:
<div id="pop-up">
<i onclick="fcnx1(),setTimeout(fcnx2, 700)" class="fas fa-times fa-2x" style="padding: 4%; float:right;"></i>
<p>Have your logo here! If you are interested in becoming a sponsor, feel free to email us at <a href="mailto:sponsor@beaverauv.org">sponsor@beaverauv.org</a>.</p>
</div>
CSS:
#pop-up {
position: absolute;
bottom: 7%;
right: 0;
height: 50%;
width: 30%;
background: #F0F0F0;
border-top: solid 5px rgb(25,28,31);
border-bottom: solid 5px rgb(25,28,31);
border-left: solid 5px rgb(25,28,31);
transition:all 385ms linear;
}
#pop-up p {
text-align: center;
margin:5%;
position: absolute;
top:50%;
transform: translateY(-50%);
}
.hide {
opacity: 0;
}
.gone {
display: none;
}
JavaScript:
<script type="text/javascript">
if(sessionStorage.getItem('hidepopup') == true){
document.getElementById("pop-up").classList.toggle("gone")
}
function fcnx1() {
document.getElementById("pop-up").classList.toggle("hide");
sessionStorage.setItem('hidePop', true);
}
function fcnx2() {
document.getElementById("pop-up").classList.toggle("gone");
}
</script>
最佳答案
存储在 sessionStorage
中的数据是 string
类型,而不是 boolean
,例如像这样并引用值“true”
请注意,您还在 get/set 调用中拼写了不同的键 'hidepopup'
。
if(sessionStorage.getItem('hidepopup') == "true"){
document.getElementById("pop-up").classList.toggle("gone")
}
function fcnx1() {
document.getElementById("pop-up").classList.toggle("hide");
sessionStorage.setItem('hidepopup', "true");
}
关于javascript - session 存储弹出不使用 session 存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51217948/