程序员经验分享-hwhale

弹出模式在页面顶部被切断

2023-12-26

这是模态的现场演示 https://cdn.rawgit.com/Twinbird24/tbk-popup/8fb4e760/index.html（它应该在几秒钟后打开。更新：此链接现在显示完成的版本）。

这是包含所有文件的 GitHub 存储库。 https://github.com/Twinbird24/tbk-popup（更新：此链接现在显示完成版本）。

当我向上滚动时，弹出窗口的顶部被切断，但我无法向上滚动查看它，尽管有overflow-y: scroll;在弹出容器上。

这个问题发生在较小分辨率的屏幕上（如果你在演示中看不到它）（see here https://s20.postimg.org/gkj91brx9/scroll_top1.jpg）或当屏幕宽度收缩时（see here https://s20.postimg.org/yom9lyplp/scroll_top2.jpg).


我建议对 CSS 进行以下更改：

  • Set overflow: hidden on body当弹出窗口打开时。当尝试滚动弹出窗口时，这将阻止令人讨厌的正文滚动。
  • 去除translate on #popup
  • 改变margin to auto
  • 改变top and left to 0
  • Add right and bottom并设置为0

最后的项目将自动将弹出内容在窗口中居中，您将能够在弹出容器 div 内滚动（这是有效的，因为位置设置为absolute).

还可能想设置background-color: #fff on #top-section这样，如果窗口很短，您仍然可以看到文本，否则最终会在深色透明背景上显示黑色文本。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

modaldialog

弹出模式在页面顶部被切断 的相关文章

随机推荐

  • Google Apps 脚本返回 Code.gs 中的对象

    是否无法从服务器端返回 Google Apps 脚本中的对象 我的代码如下 function getAllEventsOfDate var cal CalendarApp getCalendarById Session getActiveU

  • 使用 Intent 从 Android 应用程序发送 HTML 电子邮件

    我正在尝试使用意图从 Android 应用程序发送 HTML 电子邮件 我正在使用以下代码 Intent i new Intent Intent ACTION SENDTO Uri fromParts mailto senderMail n

  • 从 map() 调用加入 data.frames 列表

    是否有一种 tidyverse 方式来加入 data frames 列表 a lafull join 但对于 gt 2 个数据帧 我有一个 data frames 列表作为调用的结果map 我用过Reduce 以前做过类似的事情 但想将它们

  • 如何在 Django 模板上实现“后退”链接？

    我正在使用Django http www djangoproject com 我想知道是否有一种简单的方法可以使用模板系统创建指向上一页的 返回 链接 我认为在最坏的情况下 我可以从视图函数中的请求对象获取此信息 并将其传递给模板渲染方法

  • 如何判断一个URL是否是内网URL？

    使用 C 如何确定 URL 是否为 Intranet URL 如果 URL 是内联网而不是公共 URL 我想要一些代码来执行某些操作 你不可能隐含地知道 如果您的 Intranet URL 看起来像完全合格的域名 那么就很难辨别 唯一的判断

  • 如何在javascript中处理大数字[重复]

    这个问题在这里已经有答案了 我正在寻找一个处理真正 长 大 巨大 风暴 数字的数学解决方案 我还没有发现任何东西 但我不想认为这个问题目前还没有解决 我正在寻找一个简单的数字解决方案 例如 Microsoft Excel Precision

  • 如何在 Rails 6 的视图中使用 JQueryUI

    我在 Rails 6 应用程序中使用 JQuery 和 JQueryUI 时遇到困难 JQuery 和 JqueryUI 都在 application js 中工作 但是 JQueryUI 无法在视图中工作 我该如何让它在这两种情况下都起作

  • GridView 中 TemplateField 上的标头

    当我使用超链接创建 TemplateField 时 如何在 GridView 中创建标题 全名 例如 我希望 TemplateField 中的这些行具有标题 全名

  • 更新单个嵌入式文档中 MongoDB 中的单个字段

    我们有一些嵌入式文档 如下所示 id ObjectId 4e402353bc9f6ec5a6000001 first name Chris last name Jones alerts id ObjectId 4f7cd6ffc067db0

  • 从 json 序列化对象中删除空字符串属性

    我有课 它有几个属性 假设有 10 个 在这 10 个属性中 3 个填充了数据 其余 7 个为空白 即空字符串 使用了这个link https stackoverflow com questions 15574506 how to remo

  • 在 AWS Athena 中重用子查询会生成大量扫描数据

    在AWS Athena上 我尝试使用WITH子句重用计算数据 例如 WITH temp table AS SELECT FROM temp table t0 temp table t1 temp table t2 WHERE 如果查询速度很

  • 如何检测套接字断开连接？ / 如何调用带有超时的socket.recv？

    我正在使用 gevent 修补套接字连接到流媒体服务器 并且我正在使用 adsl 连接 我不控制服务器 但在我的测试中 如果我停止服务器 我可以通过检查recv的结果是否为空字符串来检测断开连接 但如果我关闭adsl调制解调器recv永远不

  • 具有多个因子组的 x 轴 ggplot

    我是 R 的新手 我有气候数据 如下面几行所示 数据表明相对于历史气候的温度变化 我想创建一个箱线图 ggplot 如下所示 我正在尝试弄清楚如何创建这种情节 任何帮助将不胜感激 DATE TMAX TMIN 1 1 2010 2 9275

  • PHP：如何按字母顺序对数组的值进行排序？

    我想在 PHP 中按字母顺序对数组的值进行排序 如果所有值都以相同字符开头 则应使用第二个字符对它们进行排序 依此类推 忽略大小写 例如 before values 0 programming values 1 Stackoverflow

  • 如何从 Azure 函数 url 中删除“api”一词

    当您创建 Http 触发的 API 时 Azure 函数将其托管在 https function app name azurewebsites net api Route configured in application 有没有办法从 U

  • 将 Unity WebGL 项目导入 Angular2 组件

    我正在寻求将 Unity WebGL 项目集成到 Angular2 应用程序中 将所有这些脚本移动到 Angular2 组件中的正确方法是什么 首先 Unity WebGL 导出一个index html 如下所示

  • Spring什么时候在bean的生命周期中创建代理？

    如果我使用 Spring AOP 在 applicationcontext 生命周期代理的哪个点被创建 bean 实例创建后 它们会运行一系列的操作Bean后处理器 http static springsource org spring d

  • Rails4中的嵌套简单表单 - 有很多通过，保存多个记录

    我通过关系得到了一个标准的 has many 人类通过一个连接表与许多兽人进行交互 交互只是一个表格和模型 没有控制器或视图 使用 Rails 4 中的 simpleform gem 我想从人类页面创建一个表单 以便从所有兽人池中选择多个兽

  • 实体框架添加现有项目导致克隆

    我正在将实体框架 v4 用于一个小项目 通常我使用 NHibernate 我的问题是 我无意中添加了一个已保存到 DB Context 集合中的对象的代码 当我执行 SaveChanges 时 EF 复制了该对象 并为其提供了一个新的主键

  • 弹出模式在页面顶部被切断

    这是模态的现场演示 https cdn rawgit com Twinbird24 tbk popup 8fb4e760 index html 它应该在几秒钟后打开 更新 此链接现在显示完成的版本 这是包含所有文件的 GitHub 存储库

热门标签