javascript - 隐藏的切换 div 干扰了非切换链接

Question

我的页面已切换内容，导致其他页面内容无法选择或点击。有没有办法让我的一般页面布局保持不变，但仍然让用户能够在“页面内容”div 中选择文本和链接？

我可以向那个“page-content”div 添加一个正的 z-index 值，这似乎可以解决问题，但当然会掩盖切换的内容，达不到目的。

function myFunction() {
  var x = document.getElementById("toggleDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
  width: 600px;
  height: 350px;
  border: 2px solid gray;
  padding: 10px;
}

.page-content {
  position: absolute;
  width: inherit;
}

.toggle-wrapper {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  position: relative;
}

.button-1 {
  background-color: beige;
  position: absolute;
  right: 0;
  bottom: 0;
}

#toggleDiv {
  width: 95%;
  height: 95%;
  width: 600px;
  height: 450px;
  margin: 0 auto;
  margin-top: 50px;
}

.link-box {
  border: 1px solid blue;
  width: 75%;
  height: 225px;
  margin-top: 100px;
  margin-left: 12.5%;
  box-sizing: border-box;
  text-align: center;
  background-color: beige;
}

.link-box a {
  width: 40%;
  margin-left: 7%;
  border: 1px solid black;
  text-align: center;
  float: left;
  height: 100px;
  margin-bottom: 25px;
}

<div class="container">
  <div class="page-content">
    <p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>

    <p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
      sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
    <a href="#">LINK</a>
  </div>
  <!--page-content-->

  <div class="toggle-wrapper">
    <button class="button-1" onclick="myFunction()">toggle</button>
    <div id="toggleDIV" style="display: none;">
      <div class="link-box">
        <p>Toggle Content </p>
        <a href="#">
          <p>Link 1</p>
        </a>
        <a href="#">
          <p>Link 2</p>
        </a>
        <button onclick="myFunction()">Cancel</button>
      </div>
      <!--link-box-->
    </div>
    <!--#toggleDiv-->
  </div>
  <!--toggle-wrapper-->
</div>
<!--container-->

Answer 1

我会通过删除父级的 block 显示，并将内部链接 div 的位置设置为绝对位置，以便它从文档流中删除并且不会阻止背后的元素。像这样:

function myFunction() {
  var x = document.getElementById("toggleDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
  width: 600px;
  height: 350px;
  border: 2px solid gray;
  padding: 10px;
  position: relative;
}

.page-content {
  position: absolute;
  width: inherit;
}

.button-1 {
  background-color: beige;
  position: absolute;
  right: 0;
  bottom: 0;
}

#toggleDiv {
  width: 600px;
  height: 450px;
  margin: 0 auto;
  margin-top: 50px;
}

.link-box {
  border: 1px solid blue;
  width: 75%;
  height: 225px;
  box-sizing: border-box;
  text-align: center;
  background-color: beige;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.link-box a {
  width: 40%;
  margin-left: 7%;
  border: 1px solid black;
  text-align: center;
  float: left;
  height: 100px;
  margin-bottom: 25px;
}

<div class="container">
  <button class="button-1" onclick="myFunction()">toggle</button>

  <div class="page-content">
    <p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>

    <p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
      sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
    <a href="#">LINK</a>
  </div>
  <!--page-content-->

  <div class="toggle-wrapper">
    <div id="toggleDIV" style="display: none;">
      <div class="link-box">
        <p>Toggle Content </p>
        <a href="#">
          <p>Link 1</p>
        </a>
        <a href="#">
          <p>Link 2</p>
        </a>
        <button onclick="myFunction()">Cancel</button>
      </div>
      <!--link-box-->
    </div>
    <!--#toggleDiv-->
  </div>
  <!--toggle-wrapper-->
</div>
<!--container-->