jquery - CSS 叠加效果未关闭-6ren

jquery - CSS 叠加效果未关闭

转载作者：行者123 更新时间：2023-12-01 07:51:58

25

4

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

它仅以一种方式工作，当您按下按钮时它会覆盖，但是当您按“关闭”时什么也不会发生。当我在 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

它仅以一种方式工作，它会叠加，当您按“关闭”时什么也不会发生。当我修复覆盖时 - 它可以工作但不能滚动。我需要一个带有一些文本的滚动覆盖层，它可能比一页长。

最佳答案

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

轻松修复；添加 z 索引...

.overlay-close {
    /* other styles */

    z-index: 1;
}

Demo

关于jquery - CSS 叠加效果未关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28862314/

25

4

0

文章推荐： scala 选项互斥值

文章推荐： python - 优化条件 while 循环

文章推荐： java - 根据从字符串解析的日期对 ArrayList 进行排序

javascript - (未)旋转矩形上的点
我找到了 this excellent question and answer它以 x/y(加上 center x/y 和 degrees/radians)开始并计算旋转- 到 x'/y'。这个计算很
.net - 为什么非法跨线程*未*被检测到？
全部: 我已经创建了一个 Windows 窗体和一个按钮。在另一个线程中，我试图更改按钮的文本，但它崩溃了；但是如果我尝试更改按钮的颜色，它肯定会成功。我认为如果您更改任何 Windows 窗体控件属
c - (未)签名短整型 (C)
本网站的另一个问题已证实，C 中没有缩写的字面后缀，并且可以执行以下操作: short Number = (short)1; 但是转换它和不这样做有什么区别: short Number = 1; 您使
SQL:从表中获取最新的(未)订阅操作
我有下表: ID (int) EMAIL (varchar(50)) CAMPAIGNID (int) isSubscribe (bit) isActionByUser (bit) 此表存储了用户对事
javascript - 如何复制手动(未)选中复选框的状态？
也就是说，无需触发Javascript事件即可改变的属性，如何保留我手动选中或取消选中的复选框的状态，然后复制到另一个地方？运行下面的代码片段并选中或取消选中其中的一些，然后点击“复制”: $('#
c++ - 可以在不取消引用的情况下增加指针仍然是段错误或具有其他(未)定义的肮脏吗？
我在网上找到的所有关于递增指针导致段错误的示例都涉及指针的取消引用 - 如果我只想递增它(例如在 for 循环的末尾)并且我不在乎它是否最终进入无效内存，因为我不会再使用它。例如，在这个程序中，每次迭
java - 如何获取用于记录的(未)编码消息
我有一个 Spring MVC REST 服务，它使用 XStream 将消息与 XML 相互转换。有什么方法可以将请求和响应中的 xml(即正文)打印到普通的 log4j 记录器？在 Contr
git - 当我需要其他分支的一些代码时如何为功能创建分支(未 merge 到开发分支中)
做我的任务有一个很大的挑战，那就是做相互依赖的任务我在这张照片中说的。假设我们有两个任务 A 和 B，执行子任务 A1、A2 和 B1、B2，假设任务 B 依赖于 A。要理想地执行任务 B，您应该执
delphi - 如何从库的角度处理 COM(未)初始化？
通过阅读该网站上的几个答案，我了解到 CoInitialize(Ex) should be called by the creator of a thread 。然后，在该线程中运行的任何代码都可以使
java - FirebaseListAdapter 未 populateView 未被调用
这个问题已经困扰我一段时间了。我以前从未真正使用过 ListViews，也没有使用过 FirebaseListAdapters。我想做的就是通过显示 id 和用户位置来启动列表的基础，但由于某种原因，
java - 检查(未)检查异常 (Java)
我很难解释这两个(看似简单)句子的含义: “受检异常由编译器在编译时检查” 这是什么意思？编译器检查是否捕获了所有已检查的异常(在代码中抛出)？ “未经检查的异常在运行时检查，而不是编译时” 这句话中
python - 如果在值中*未*找到特定的迭代子字符串，如何返回值？
我有一个包含排除子字符串的文本文件，我想迭代该文件以检查并返回不带排除子字符串的输入项。这里我使用 python 2.4，因此下面的代码可以实现此目的，因为 with open 和 any 不起作用
java - 对于(未)验证的请求绕过 @Cacheable
Spring 的缓存框架能否了解请求上下文的身份验证状态，或者更容易推出自己的缓存解决方案？最佳答案尽管我发现这个用例 super 奇怪，但您可以为几乎任何与 SpEL 配合使用的内容设置缓存条件
c++ - 指针/整数算术(未)定义的行为
我有以下函数模板: template HeldAs* duplicate(MostDerived *original, HeldAs *held) { // error checking omi
android - 如果您的应用程序具有设备管理员/设备所有者权限(未 Root )，如何杀死另一个应用程序
如果我的应用程序具有设备管理员/设备所有者权限(未获得 root 权限)，我如何才能从我的应用程序中终止(或阻止启动)另一个应用程序？最佳答案设备所有者可以阻止应用程序: DevicePolicy
tridion - 组件中的 XSLT 被(未)编码
非常简单的问题，但我似乎无法让它正常工作。我有一个组件，其中有一些 XSLT(用于导航)。它通过 XSLT TBB 使用 XSLT Mediator 发布。发布后
jquery - Droppable 创建(未)嵌套对象 - 但可拖动的位置发生变化
我正在将一个对象拖动到一个可拖放的对象内，该对象也是可拖动的。放置对象后，它会嵌套在可放置对象内。同样，如果我将对象拖到可放置的外部，它就不再嵌套。但是，如果我经常拖入和拖出可放置对象，则可拖动对象
jquery - 如何检测 Angular 中是否*未*单击指令元素
我正在尝试为按钮和弹出窗口等多个指令实现“取消选择”功能。也就是说，我希望当用户单击不属于指令模板一部分的元素时触发我的函数。目前，我正在使用以下 JQuery 代码: $('body').click
javascript - 加载 CSS 未 100% 工作
我从 this question 得到了下面的代码，该脚本用于在 Google tasks 上更改 iframe[src="about:blank"] 内的 CSS使用 Chrome 扩展 Tempe
java - 未 stub 调用的 native 类型的返回值
我有一些 @Mock 对象，但没有指定在该对象上调用方法的返回值。该方法返回 int (不是 Integer)。我很惊讶地发现 Mockito 没有抛出 NPE 并返回 0。这是预期的行为吗？例如:

首页

博学

6Ren·AI

商城

jquery - CSS 叠加效果未关闭