Question

我正在使用叠加效果的网站上工作。我在W3 Schools找到了如何做的，这很容易。

但是，我试图在同一页面上放置两个单独的叠加层：单击一个按钮以查看一组文本，单击第二个以查看另一组文本。

我遇到的问题是我不知道如何区分单独的叠加层。在下面的示例中，如果用户单击第一个重叠式广告按钮，则获取第二个重叠式广告的文字。并且，如果他们单击第二个叠加按钮，则会得到要用于第二个叠加的文本。换句话说，我似乎无法显示第一个重叠文字。

我想这很简单，但是我自己还没有弄清楚。

下面是一些代码。这不是我的实际站点，而是W3上提供的内容的略作编辑的版本。如果我可以在此处学习如何区分这两个按钮，则可以在自己的网站上完成。

谢谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS -->
<style>
#overlay1 {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

#overlay2 {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

#text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
</style>

</head>

<body>
<!-- Overlay 1: -->
<div id="overlay1" onclick="off()">
  <div id="text">Overlay 1 Text</div>
</div>

<div style="padding:20px">
  <h2>Overlay with Text Examples</h2>
  <button onclick="on()">Overlay 1</button>
</div>

<script>
function on() {
    document.getElementById("overlay1").style.display = "block";
}

function off() {
    document.getElementById("overlay1").style.display = "none";
}
</script>




<!-- Overlay2: -->
<div id="overlay2" onclick="off()">
  <div id="text">Overlay 2 Text</div>
</div>

<div style="padding:20px">
  <button onclick="on()">Overlay 2</button>
</div>

<script>
function on() {
    document.getElementById("overlay2").style.display = "block";
}

function off() {
    document.getElementById("overlay2").style.display = "none";
}
</script>

</body>
</html>

Answer 1

您正在为两个叠加层调用相同的on和off函数...换句话说，您正在重新定义函数。

将您的body更改为以下内容：

<!-- Overlay 1: -->
<div id="overlay1" onclick="off('overlay1')">
  <div id="text">Overlay 1 Text</div>
</div>

<div style="padding:20px">
  <h2>Overlay with Text Examples</h2>
  <button onclick="on('overlay1')">Overlay 1</button>
</div>

<!-- Overlay2: -->
<div id="overlay2" onclick="off('overlay2')">
  <div id="text">Overlay 2 Text</div>
</div>

<div style="padding:20px">
  <button onclick="on('overlay2')">Overlay 2</button>
</div>

<script>
function on(id) {
    document.getElementById(id).style.display = "block";
}

function off(id) {
    document.getElementById(id).style.display = "none";
}
</script>

JS / CSS叠加层：如何区分同一页面上的2个按钮？

1 个答案: