隐藏的切换div会干扰非切换的链接

Question

我的页面已切换内容，导致其他页面内容无法选择或单击。有什么方法可以使我的总体页面布局保持不变，但仍然可以让用户在“页面内容” div中选择文本和链接？

我可以为该“页面内容” 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

我将通过删除父级的阻止显示，并将内部链接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-->