Reputation: 19

Close overlay on page refresh/revisit

I have the following HTML, CSS, and Javascript:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">

function getTarget(event){
    target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
    return target;
}

document.onclick = function(event){
    var target = getTarget(event);
    if(target.id == ""){
        var overlay = document.getElementById('overlay');
        var specialBox = document.getElementById('specialBox');
        var button = document.getElementById('qualityButton');
        overlay.style.display = "none";
        specialBox.style.display = "none";
        button.style.color="#000000";
    }

}


function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    var button = document.getElementById('qualityButton');
    overlay.style.opacity = .7;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
        button.style.color="#000000";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
        button.style.color="#ff0000";
    }
}
</script>

<style type="text/css">

div#overlay {
    display: none;
    z-index: 2;
    background: #A9A9A9;
    position: fixed;
    width: 879px;
    height: 291px;
    top: 50px;
    left: 0px;
    text-align: center;
}
div#specialBox {
    display: none;
    position: fixed;
    z-index: 3;
    width: 719px; 
    height: 215px;
    top: 88px;
    left: 80px;
    background: #FFF;
}
div#wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left: 24px;
}
</style>

<style type="text/css">
    .btn {
        cursor:pointer;
        font-size:24px;
        border:none;
        color:#000
}
    .btn:hover{ 
    color:#F00; 
    }
</style>

<style type="text/css">
    .x {
        background-color:white;
        cursor:pointer;
        font:Arial;
        font-size:14px;
        color:red;
        z-index: 4;
        position: fixed;
        top: 92px;
        left: 766px;
    }
</style>

</head>

<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
  <button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
  <button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->



</div>
</body>
</html>

The overlay opens and closes just fine. However, if the overlay is opened and the user visits another page on the website, and returns to the original page where the overlay was, the overlay still remains open...Is there a way to make the overlay close upon refreshing the page and upon returning to the page having visited another one?

Any help is much appreciated :)

James

Upvotes: 1

Answers (3)

Luca Davanzo

Reputation: 21520

In my opionion there are at least two solutions.

using coockies
using global function

Second solution:

create your "popup.js" and call it in html, of course. Your js will be:

var Popup = (function () {  
var isVisible;
 return {
 init: function () {   
  isVisible = false;   
 },    
 show: function() {   
   ....  
 },  
 hide: function() {
   .... 
 },     
 isVisible: function() {  
  return isVisible;  
 }
 };
}());

Upvotes: 1

Saad Bashir

Reputation: 4519

The easiest way I can think of is using Localstorage to do the task. You can read more about localstorage Here

In your case you will have to save timestamp in the variable. And then you can have an if statement on your homepage which checks the time which has elapsed since last time the page was refreshed. Let's say if it is more than 10 minutes or maybe 30 minutes you can show the overlay again. The reason I am saying you will need timestamp is that you will have to unset the variable if the user visits again after some time and is not returning from with-in the website. There is no timeout function in localstorage so you will have to use a tweak like timestamp.

Another way is to save a value in $_SESSION and see if it is set to certain value. If it is then it means it is a returning user else its a new user. But I am not sure if your page is php or not therefore I have mentioned localstorage method first.

If you need any further assistance please do let me know.

Upvotes: 1

Anil Bhattarai100

Reputation: 693

Try This using display none to the div which you want to hide while refreshing

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">

        function getTarget(event){
            target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
            return target;
        }

        document.onclick = function(event){
            var target = getTarget(event);
            if(target.id == ""){
                var overlay = document.getElementById('overlay');
                var specialBox = document.getElementById('specialBox');
                var button = document.getElementById('qualityButton');
                overlay.style.display = "none";
                specialBox.style.display = "none";
                button.style.color="#000000";
            }

        }


        function toggleOverlay(){
            var overlay = document.getElementById('overlay');
            var specialBox = document.getElementById('specialBox');
            var button = document.getElementById('qualityButton');
            overlay.style.opacity = .7;
            if(overlay.style.display == "block"){
                overlay.style.display = "none";
                specialBox.style.display = "none";
                button.style.color="#000000";
            } else {
                overlay.style.display = "block";
                specialBox.style.display = "block";
                button.style.color="#ff0000";
            }
        }
    </script>

    <style type="text/css">

        div#overlay {
            display: none;
            z-index: 2;
            background: #A9A9A9;
            position: fixed;
            width: 879px;
            height: 291px;
            top: 50px;
            left: 0px;
            text-align: center;
        }
        div#specialBox {
            display: none;
            position: fixed;
            z-index: 3;
            width: 719px;
            height: 215px;
            top: 88px;
            left: 80px;
            background: #FFF;
        }
        div#wrapper {
            position:absolute;
            top: 0px;
            left: 0px;
            padding-left: 24px;
        }
    </style>

    <style type="text/css">
        .btn {
            cursor:pointer;
            font-size:24px;
            border:none;
            color:#000
        }
        .btn:hover{
            color:#F00;
        }
    </style>

    <style type="text/css">
        .x {
            background-color:white;
            cursor:pointer;
            font:Arial;
            font-size:14px;
            color:red;
            z-index: 4;
            position: fixed;
            top: 92px;
            left: 766px;
        }
    </style>

</head>

<body>
<!-- Start Overlay -->
<div id="overlay" style="display: none"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
    <button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
    <button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->



</div>
</body>
</html>

Upvotes: 2

Close overlay on page refresh/revisit

Answers (3)

Related Questions