Reputation: 86
I have an image popup that appears on every page I navigate.
I need to know how is it possible to make it disappear if I click on close, it won't show up again for that session.
<body onclick="document.getElementById('anuntImportant').style.display='none'">
<div id="anuntImportant" style="position: absolute; top:30%;left:40%; display:block;overflow:visible; z-index:1000">
<img src="image/data/program-sarbatori.jpg">
</div>
</body>
Upvotes: 0
Views: 64
Reputation: 66590
You can use sessionStorage for that:
function hide() {
document.getElementById('anuntImportant').style.display='none';
if (window.sessionStorage) {
sessionStorage.setItem('hideAnuntImportant', true);
}
}
window.onload = function() {
if (window.sessionStorage) {
if (JSON.parse(sessionStorage.getItem('hideAnuntImportant'))) {
document.getElementById('anuntImportant').style.display='none';
}
}
}
<body onclick="hide()">
or use php session, you will need to call ajax request on click and and in php call start_session
and set $_SESSION['anuntImportant']
to true and when you render the element you set style="display: none"
ajax.php
<?php
start_session();
$_SESSION['anuntImportant'] = true;
?>
yourpage.php
<?php
start_session();
?>
<body onclick="document.getElementById('anuntImportant').style.display='none'">
<div id="anuntImportant" style="position: absolute; top:30%;left:40%; display:<?= $_SESSION['anuntImportant'] ? 'none' : 'block' ?>;overflow:visible; z-index:1000">
<img src="image/data/program-sarbatori.jpg">
</div>
</body>
Upvotes: 1