隐藏的切换 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-->