Javascript 通过单击外部覆盖关闭覆盖，当覆盖处于活动状态时高亮显示覆盖按钮

当前，仅在单击按钮“X”时覆盖才会关闭。我想它关闭时，点击外覆盖或如果页面刷新。 另一件事我已经尝试了至少100次，但不幸失败了，那就是在覆盖激活时保持悬停效果（颜色#F00）完好无损。我试过了 .active{ 颜色：#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>

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

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

函数toggleOverlay（）{
var overlay=document.getElementById（'overlay'）；
var specialBox=document.getElementById（'specialBox'）；
overlay.style.opacity=.7；
if（overlay.style.display==“块”）{
overlay.style.display=“无”；
specialBox.style.display=“无”；
}否则{
overlay.style.display=“块”；
specialBox.style.display=“块”；
}

CSS如下所示：

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

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

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

分区覆盖{
显示：无；
z指数：2；
背景：#A9A9；
位置：固定；
宽度：879px；
身高：291px；
顶部：50px；
左：0px；
文本对齐：居中；
}
分区#专用箱{
显示：无；
位置：固定；
z指数：3；
宽度：719px；
身高：215px；
顶部：88px；
左：80px；
背景：#FFF；
}
div#wrapper{
位置：绝对位置；
顶部：0px；
左：0px；
左侧填充：24px；
}
.btn{
光标：指针；
字体大小：24px；
边界：无；
颜色：#000
}
.btn:悬停{
颜色：#F00；
}
.x{
背景色：白色；
光标：指针；
字体：Arial；
字体大小：14px；
颜色：红色；
z指数：4；
位置：固定；
顶部：92px；
左：766px；

HTML如下所示：

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

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

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

X
最高质量

---

非常感谢您的帮助！

请记住，这是解决您问题的快速方法，编写它是为了向您展示

javascript

document.onclick=function（event）

这会在任何鼠标单击文档时触发

var target=getTarget（事件）；

此函数调用将返回单击的元素的函数

函数的作用是什么

由于所有元素都有一个

id

，我们正在检查

id

是否为空。如果不知道它在元素之外，请关闭

div

我在你的

按钮中添加了一个
id
，这样我们可以将颜色从黑色改为红色

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


无标题文件
函数getTarget（事件）{
target=（typeof window.event==“未定义”）？event.target:window.event.src元素；
回报目标；
}
document.onclick=函数（事件）{
var目标=getTarget（事件）；
如果（target.id==“”）{
var overlay=document.getElementById（'overlay'）；
var specialBox=document.getElementById（'specialBox'）；
var button=document.getElementById（'qualityButton'）；
overlay.style.display=“无”；
specialBox.style.display=“无”；
button.style.color=“#000000”；
}
}
函数toggleOverlay（）{
var overlay=document.getElementById（'overlay'）；
var specialBox=document.getElementById（'specialBox'）；
var button=document.getElementById（'qualityButton'）；
overlay.style.opacity=.7；
if（overlay.style.display==“块”）{
overlay.style.display=“无”；
specialBox.style.display=“无”；
button.style.color=“#000000”；
}否则{
overlay.style.display=“块”；
specialBox.style.display=“块”；
button.style.color=“#ff0000”；
}
}
分区覆盖{
显示：无；
z指数：2；
背景：#A9A9；
位置：固定；
宽度：879px；
身高：291px；
顶部：50px；
左：0px；
文本对齐：居中；
}
分区#专用箱{
显示：无；
位置：固定；
z指数：3；
宽度：719px；
身高：215px；
顶部：88px；
左：80px；
背景：#FFF；
}
div#wrapper{
位置：绝对位置；
顶部：0px；
左：0px；
左侧填充：24px；
}
.btn{
光标：指针；
字体大小：24px；
边界：无；
颜色：#000
}
.btn:悬停{
颜色：#F00；
}
.x{
背景色：白色；
光标：指针；
字体：Arial；
字体大小：14px；
颜色：红色；
z指数：4；
位置：固定；
顶部：92px；
左：766px；
}
X
最高质量
Hi N0M3，我已经阅读了你的答案，我一回来就会尝试，因为我要出门一段时间。非常感谢你抽出时间回复。我会尽快回复你。再次感谢！！Hi N0M3，你的解决方案非常好！！：D非常感谢！我只是想知道你所说的“快速修复”是什么意思？我也理解document.onclick=function（event），但我似乎无法理解var target=getTarget（event）；您能否解释一下后者，因为我很想了解它是如何工作的。再次感谢您，您太客气了。快速修复只是指我写得很快，没有以任何方式进行优化或测试，
getTarget（event）使用
是因为
Internet Explorer
非常糟糕。因此，为了获得对单击元素的引用，我们需要执行一个
交叉浏览器
检查，
IE
通过
窗口.event.srcElement
引用它，而真正的浏览器只使用
事件.target
。很多人一直在使用jQuery，所以他们不需要检查浏览器兼容性。@user3677306嗯，代码中有一个错误，但是我更新了它，此行目标=（typeof window.event==“未定义”）？event.target:window.event.srcElement；必须更改，它以另一种方式给出错误，键入它backwards感谢！我注意到，如果覆盖打开，用户单击网站上的另一个页面，然后返回ori