jquery - 固定位置模态滚动/焦点-6ren

jquery - 固定位置模态滚动/焦点

转载作者：行者123 更新时间：2023-11-28 09:42:17

29

4

我最近构建了一个 JS/CSS 模态系统。该元素使用的是 Bootstrap 模式，但通过在其中放置无法滚动或无法正确聚焦在移动设备上的表单和大量内容，将其推向了极限。

可以触发模态系统here单击大部分页脚链接(隐私政策、条款和条件等)。

一般问题:模态框具有固定位置的 CSS，当您在模态框上滚动时，这会导致正文向下滚动。我尽了最大努力让这无关紧要，主要是通过“溢出”、“高度”和一些简单的“z-index”东西。它在 iOS 上运行良好，但我们发现在 Android 上运行不佳。

特性:当主体的滚动位置不在顶部时，X 按钮不可点击，并且在主体的滚动位置位于顶部之前，模态框不会向上滚动。

我知道我是在强制它...转换对于网站来说很重要，不重新加载页面并将它们保持在“漏斗”中真的很重要。我是否应该更改其设置方式，而不是尝试在正文顶部显示可滚动元素，而是暂时替换正文？或者是否有我缺少的 CSS 修复程序？我被困住了。

最佳答案

这是我最终使用的! HTML...

<body>

  <main id="main">
    Site Content
  </main>

  <aside id="modals">
    Modals In Here
  </aside>

</body>

对于 CSS，我做了一个仅针对移动设备的媒体查询。 CSS 使用 position:static 和 display:block 以标准方式(不使用 position:fixed)显示所有模态。内容虽然是“模式”，但以 100% 标准、受支持的方式显示。现在没有与滚动/焦点相关的错误。

JS 正在向我在 CSS 选择器中使用的主体添加一个类。至于 JS 的其余部分，我将把库发布到 GitHub 并使它们可重用。 +1 如果你有兴趣!

这个系统还活着here .

关于jquery - 固定位置模态滚动/焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25368631/

29

4

0

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人