Question

我有以下HTML，CSS和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>

叠加打开和关闭就好了。但是，如果打开了叠加层并且用户访问了网站上的其他页面，并返回到叠加层所在的原始页面，则叠加层仍然保持打开状态...是否有办法在刷新页面时关闭叠加层返回到访问过另一个页面的页面？

非常感谢任何帮助：）

詹姆斯

Answer 1

尝试使用display none来刷新

时要隐藏的div

<!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>

Answer 2

在我的观点中，至少有两种解决方案。

使用coockies
使用全局功能

第二个解决方案：

创建你的“popup.js”，然后用html调用它。你的js将是：

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

Answer 3

我能想到的最简单的方法是使用Localstorage来完成任务。您可以阅读有关localstorage Here

的更多信息

在您的情况下，您必须在变量中保存时间戳。然后你可以在你的主页上有一个if语句，用于检查自上次刷新页面以来经过的时间。我们可以说，如果超过10分钟或者30分钟，您可以再次显示叠加层。我说你需要时间戳的原因是，如果用户在一段时间后再次访问并且没有从网站中返回，则必须取消设置变量。 localstorage中没有超时功能，因此您必须使用类似时间戳的调整。

另一种方法是在$ _SESSION中保存一个值，看看它是否设置为某个值。如果是，则表示它是返回用户，而不是新用户。但我不确定你的页面是否是php，因此我首先提到了localstorage方法。

如果您需要任何进一步的帮助，请告诉我。

在页面刷新/重新访问时关闭覆盖

3 个答案: