SessionStorage PopUp Fenster
Habe ein Pop-up-Fenster für eine Webseite mit JS gebastelt, klappt so weit auch. Das soll dann beim Seitenaufruf auftauchen, aber nur für die Dauer der Session, also es soll erst wieder angezeigt werden, nachdem das Browserfenster geschlossen und die Seite wieder in einem neuen Tab geöffnet wurde.
Da muss man ja mit sessionStorage arbeiten. Nur bekomme ich das nicht hin.
Müsste man dann abfragen, ob in der Session schon mal das Pop-up-Fenster geöffnet wurde? Wäre für jede Hilfe dankbar.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
body{
background:grey;
color:white;
}
#modal[data-show="0"] {
display: none;
}
#modal{
border:2px solid white;
display:flex;
flex-direction:column;
border-radius:30px;
width:70vw;
min-width:500px;
height:300px;
margin:0 auto;
}
#modalheader{
display:flex;
width:100%;
}
#modaltitle{
text-align:center;
font-size:28px;
width:100%;
line-height:40px;
border-bottom:2px solid white;
}
#modalbody{
padding:10px;
font-size:35px;
}
#close{
position:relative;
left:0;
top:0;
height:40px;
cursor:pointer;
width:35px;
font-size:22px;
font-weight:900;
border-top-left-radius:28px;
border-bottom-right-radius:10px;
margin:-1px 0 0 -1px;
line-height:40px;
text-align:center;
border:2px solid white;
background:black;
}
#close:hover{
background:green;
}
</style>
</head>
<body>
<div id="modal" data-show="0">
<div id="modalheader">
<div id="close">X</div>
<div id="modaltitle"> Herzlich willkommen </div>
</div>
<div id="modalbody">
Sie sind das erste mal hier,
nachdem sie X geklickt haben,<br> sehen sie den Modal nie wieder,<br> ( außer man löscht Cache)
</div>
</div>
</body>
<script>
var moda=document.getElementById('modal');
var bod = document.getElementsByTagName('body');
var datum=new Date();
var time=datum.getTime();
if(localStorage.besucher_wiederkehr){
bod[0].innerHTML='Dein erster Besuch wahr vor '+((time-localStorage.besucher_wiederkehr)/1000).toFixed(0)+' Sekunden';
moda.setAttribute('data-show', 0);
}else{
moda.setAttribute('data-show', 1);
}
closen=document.getElementById('close');
closen.addEventListener('click',function(){
modal.style.display='none';
bod.innerHTML='Lade jetzt die Seite neu';
save();
})
var bod = document.getElementsByTagName('body');
bod[0].onbeforeunload = function (e) {
save();
}
function save(){
localStorage.besucher_wiederkehr=time;
}
</script>
</html>