Question

我是新来的，所以不要生气。

它只能以一种方式工作，当你按下按钮时它会叠加，但当你按下＆＃34;关闭＆＃34;什么都没发生。当我在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

它只能以一种方式工作，它会叠加，当你按下＆＃34;关闭＆＃34;什么都没发生。当我修复叠加时 - 它可以工作但不能滚动。我需要一个带有一些文字的滚动叠加层，它可能比一页更长。

Answer 1

由于它位于叠加层后面，您实际上并没有按下关闭按钮。

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

.overlay-close {
    /* other styles */

    z-index: 1;
}

Demo

Answer 2

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

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

<强> Demo

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

CSS叠加效果不会关闭

2 个答案: