CSS叠加效果没有关闭

Question

我是新来的，别生气

它只以一种方式工作，当你按下按钮时它会覆盖，但当你按下 "Close" 时什么也没有发生。当我在 CSS .overlay 中进行固定时 - 它可以工作但不能滚动。我需要一个带有一些文本的滚动叠加层，文本可能超过一页。请帮忙:)

我有这个简单的代码：

 <html>
  <head>
    <title>Fullscreen Overlay Animation</title>
  </head>
  <body>
    <div id="container">
      <button class="menuButton" id="overlay-menu" type="button">Open</button>
    </div>
    <div class="overlay overlay-data">
      <button type="button" class="overlay-close">Close</button>
      <nav>
        <ul>
          <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae nulla vel leo porttitor viverra et nec nibh. Cras blandit leo risus, quis volutpat erat venenatis sit amet. In ac hendrerit purus, in euismod metus. In eu magna tempus, mattis risus a, facilisis dui. Nulla ac commodo est. Proin vitae accumsan felis. Nunc pulvinar lorem ac eros porta, ac egestas quam dignissim. Suspendisse viverra finibus odio in cursus.</p></li>
        </ul>
      </nav>
    </div>
    <script>
      $( "#overlay-menu" ).click(function() {
        $( ".overlay" ).addClass
        ('overlay-open');
      });
    </script>
    <script>  
    $( ".overlay-close" ).click(function() {
      $( ".overlay" ).removeClass
      ( 'overlay-open' ); 
      });
    </script>
  </body>
</html>

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  width: 100px;
}
#overlay-menu {
  width: 100px;
  height: 50px:
}
body {
  background: #7a7a7a;
  color: #1D1F20;
  font-family: "Roboto", sans-serif;
}
.menuButton {
  background-color: #7a7a7a;
  text-indent: 0;
  border: 1px solid #000;
  color: #fff
  font-size: 15px;
  font-weight: bold;
}
.menuButton:hover {
  background-color: #474747;
}
.menuButton:active {
  position: relative;
  top; 1px;
}
.overlay {
  position: scroll;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.80);
}
.overlay nav {
  text-align: center;
  position: relative;
  top: 20%;
  height: 60%;
  font-size: 80px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}
.overlay ul li {
  display: inline-block;
  height: 20%;
}
.overlay ul li a {
  font-weight: 300;
  text-decoration: none;
  display: block;
  color: #1d1f20;
  margin-right: 40px;
  list-style: none;
}
.overlay-close {
  width: 150px;
  height: 50px;
  position: fixed;
  right: 10px;
  top: 10px;
  border: 1px solid #000;
  font-size: 14px;
}
.overlay-data {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  visibility: 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

Fiddle

它只以一种方式工作，它会叠加，当您按下 "Close" 时什么也不会发生。当我固定覆盖时 - 它可以工作但不能滚动。我需要一个带有一些文本的滚动覆盖层，它可能超过一页。

Answer 1

您实际上并没有按下关闭按钮，因为它在叠加层后面。

轻松修复；添加 z-index...

.overlay-close {
    /* other styles */

    z-index: 1;
}

Demo

Answer 2

需要使用 z-index 将关闭按钮置于顶部：

.overlay-close {
    ...
    z-index: 9999;
}

Demo

请注意，我也简化了您的 jQuery 函数。

CSS叠加效果没有关闭

CSS overlay effect doesnt close

html

css

jquery

scroll

overlay