Question

目前Overlay仅在单击“X”按钮时关闭。我希望它在叠加层外部单击或刷新页面时关闭。我试过至少100次并且可怜失败的另一件事是当叠加层处于活动状态时保持悬停效果（颜色＃F00）不变。我试过了。活性{ 颜色：＃F00; } 但似乎这只适用于点击链接的瞬间。

Javascript如下：

<script type="text/javascript">
function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .7;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
</script>

CSS如下：

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

HTML如下：

<!-- 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 class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->

非常感谢您的帮助！

Answer 1

请注意，这是对您的问题的快速解决方案，并编写它以向您展示javascript

中的一些基础知识

document.onclick = function(event)只要鼠标点击文档就会触发。

var target = getTarget(event);这会调用将返回单击元素的函数

该功能的作用

由于您的所有元素都有id，我们正在检查id是否为空。如果不知道它超出你的元素之外那么接近div

我在id添加了button，因此我们可以将颜色从黑色更改为红色

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

通过单击外部叠加关闭叠加，在叠加活动时突出显示叠加按钮

1 个答案: