Question

我遇到以下问题：我正在尝试制作多个叠加层，但它不起作用。它始终仅将最后一个显示为覆盖图。即使当我按下第一个按钮或第二个按钮时放了不同的“ id”-我将使用overlay2，但当我按下id“ overlay1”时，我却再也看不到overlay1。如何使它工作？

function on() {
  document.getElementById("overlay1").style.display = "block";
}

function off() {
  document.getElementById("overlay1").style.display = "none";
}

function on() {
  document.getElementById("overlay2").style.display = "block";
}

function off() {
  document.getElementById("overlay2").style.display = "none";
}

#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;
}

#text1 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#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;
}

#text2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div id="overlay1" onclick="off()">
  <div id="text1">Overlayy878 Text</div>
</div>

<div style="padding:20px">
  <h2>Overlay with Text</h2>
  <button onclick="on()">Turn on overlay effect</button>
</div>



<div id="overlay2" onclick="off()">
  <div id="text2">Overlay 2 TWO Text</div>
</div>

<div style="padding:20px">
  <h2>Overlay with Text</h2>
  <button onclick="on()">Turn on overlay effect</button>
</div>

Answer 1

问题是您要在同一级别定义多个具有相同名称的函数。 on（）和 off（）的第二个定义切换了overlay2的可见性，由于它稍后出现在脚本中，因此它将覆盖将控制overlay1的第一个定义。 / p>

要解决此问题，只需定义这两个函数一次，然后添加一个附加参数即可确定是要切换overlay1还是overlay2。

<button onclick="on(1)">Turn on overlay effect</button> // to toggle overlay1
<button onclick="on(2)">Turn on overlay effect</button> // to toggle overlay2
<div id="overlay1" onclick="off(1)"> // hide overlay1
<div id="overlay2" onclick="off(2)"> // hide overlay2

这是完整的示例：

function on(param) {
  document.getElementById("overlay" + param).style.display = "block";
}

function off(param) {
  document.getElementById("overlay" + param).style.display = "none";
}

#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;
}

#text1 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#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;
}

#text2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div id="overlay1" onclick="off(1)">
  <div id="text1">Overlayy878 Text</div>
</div>

<div style="padding:20px">
  <h2>Overlay with Text</h2>
  <button onclick="on(1)">Turn on overlay effect</button>
</div>



<div id="overlay2" onclick="off(2)">
  <div id="text2">Overlay 2 TWO Text</div>
</div>

<div style="padding:20px">
  <h2>Overlay with Text</h2>
  <button onclick="on(2)">Turn on overlay effect</button>
</div>

Answer 2

这是您要实现的目标吗？

document.getElementById('btn1').addEventListener('click', function(){
    document.getElementById("overlay1").style.display = "block";
})

document.getElementById('overlay1').addEventListener('click', function(){
    document.getElementById("overlay1").style.display = "none";
})

document.getElementById('btn2').addEventListener('click', function(){
    document.getElementById("overlay2").style.display = "block";
})

document.getElementById('overlay2').addEventListener('click', function(){
    document.getElementById("overlay2").style.display = "none";
})

#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;
}

#text1{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#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;
}

#text2{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

<div id="overlay1">
        <div id="text1">Overlayy878 Text</div>
    </div>
      
    <div style="padding:20px">
        <h2>Overlay with Text</h2>
        <button id="btn1">Turn on overlay effect</button>
    </div>
      
     
    <div id="overlay2">
        <div id="text2">Overlay 2 TWO Text</div>
    </div>
      
    <div style="padding:20px">
        <h2>Overlay with Text</h2>
        <button id="btn2" >Turn on overlay effect</button>
    </div>

如何使倍数文本重叠

2 个答案: