个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
28
4
背景:
我使用教程 here 创建了一个 (HTML、CSS、JS) 灯箱.当显示灯箱覆盖 div 时(单击按钮时)，我想停止滚动条功能。这样，当有人在页面上查看灯箱中的图像时，他们无法滚动到页面的其他部分。然后，当灯箱关闭时，再次启用滚动条功能，以便它们可以自由滚动。不过，我似乎找不到正确的方法。
我试过这个:
$(document).css('overflow-y', 'hidden');
但是当我将它添加到我的代码中时没有任何反应。就好像我从未添加过它一样。
问题:
有没有办法在灯箱打开时停止页面溢出功能，然后在关闭时重新启用它？
抱歉，如果有一个简单的答案。我是 JavaScript 新手。
Javascript:
function startLightBox() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "block";
lb.style.display = "block";
}
function dismiss() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "none";
lb.style.display = " none";
}
CSS:
#lightBoxBg {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
display: none;
background-color: #000000;
height: 100%;
width: 100%;
}
#lightBox {
position: absolute;
top: 50%;
left: 40%;
display: none;
}
HTML 正文
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button onclick="startLightBox()">Light Box</button>
</div>
</div>
</div>
<div id="lightBoxBg" onclick="dismiss()">
</div>
<div id="lightBox">
<img src="test2.png" />
</div>
</body>
最佳答案
试试这个-
jquery
在 startLightBox() 函数中使用 $("body").css("overflow", "hidden");。
并在 dismiss() 函数中使用 $("body").css("overflow", "auto");。
Javascript
使用
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
在 startLightBox() 函数中。
并使用
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
在 dismiss() 函数中。
关于javascript - 停止和启动页面溢出/单击时滚动的能力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39436478/
28
4
0
我到处搜索 .net 3.0 和 3.5 框架的内容列表，因为我一直在使用哈希表等旧技术而不是字典(较新的技术)进行编程。 我一直在犹豫，想知道在哪里可以找到 C# 和 .Net 框架的所有最新功能的
你好我有一个非常不寻常的问题，因为我认为在我的情况下工作流运行时没有使用足够的 CPU 能力。场景如下: 我向队列发送了很多消息。我使用 WorkflowRuntime 类中的 EnqueueItem
我正在为 OSX 图像处理应用程序编写一个插件接口(interface)。它的设计理念是插件应该尽可能简单，以便开发人员可以在看到示例代码后几分钟内进入并编写效果。为此，这些示例不需要或使用 XCod
...或者必须抛出异常才能影响性能？ 引用已接受的答案here .这是我想要实现的东西，如果以这种方式创建实例不会使事情变得非常慢的话。 (我每秒要创建数千个对象，粒子系统等。所以不，考虑到在 Jav
我必须开发 C API 来通过 UI APPLICATION 使用重启功能而不是系统调用和 exec 功能来关闭 linux 系统。 This reboot link说为了运行这个函数调用者必须有 C
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Droid SDK 是否支持手指在屏幕上滑动返回上一屏幕，而不是使用返回键？ 最佳答案 我假设你的意思是“滑动”作为 i-phone 的解锁系统。 返回上一屏幕没有内置任何东西..用于实现手指检测实现
我无法理解 Michael Hartl 的 Ruby on Rails 教程中“记住我”的实现。他创建了一个带有登录方法的 SessionsHelper 模块，其中包含以下内容: module Ses
近日，华为 分析服务 6.9.0版本发布，正式上线 探索能力 。开发者可自由定义与配置分析模型，支持报告实时预览，数据洞察体验更加灵活与便捷. 新上线的探索能力中，有漏斗分析、事件归因、会话路径分析
给定一个带有属性“日期”的 Rails 模型“Widget”，是否可以在要求日期晚于当前时间的 CanCan 操作授权上设置条件？ documentation显示如何指定数字属性的范围: can :r
我有兴趣将 CPU 密集型 Web 应用部署到 Azure 应用服务实例。我找不到有关 Azure 应用服务的 CPU 使用率和/或限制的任何详细信息。我担心的是，如果不深入了解应用程序的 CPU 规
我的场景: 我导航到登录页面。我输入了一个已知的用户名和一个错误的密码。ZAP 没有发现任何问题。 我选择 POST 到登录页面。我找到包含用户名和密码的行。密码:ctl00%24ContentPla
我是 Laravel 的新手，我曾经在 codeigniter 上工作。我对 Eloquent ORM 的概念着迷。我有一个关于 Eloquent 能力的一般性问题。ORM的能力是什么，我的意思是我们
我正在尝试运行 Java Jetty 应用程序，但我一直看到此错误: Caused by: org.postgresql.util.PSQLException: ERROR: function cry
我正在创建一个 UITableView，我将在其中加载并显示博客提要中的数据。该数据将每天、在启动时或动态更新。 我想要做的是为此屏幕提供一些离线功能，这样如果用户没有连接到互联网，他仍然可以看到 V
我使用 ChromeDriver 2.33 和 WebDriver 3.6.0 并尝试设置文件下载的默认目录。 Map prefs = new HashMap(); prefs.put("downlo
我想知道 Java 是否有任何方法可以提示用户输入管理密码，就像他们使用 sudo 时那样，这样我就可以在 Java 程序中运行命令，而不必对系统或 Sudoers。我已经看到在 Python 中完成
Apple Pay 权利/能力仅在 App Store 中有效。我将在 App Store 和 Enterprise 中发布此应用。 如果选择了 App Store Release 方案，我希望 Xc
我正在研究 termcap 库。我正在尝试在终端中做一个行编辑器。我有一个可以在线移动的光标。一条线一切都很好。但是，如果我的行大于终端宽度，我无法使用 le 命令(将光标向左移动)将光标从第二行返回
我有时用 Java 编写代码，我注意到有时它在多核机器上使用超过 100% 的 CPU。我现在在一台有 33 个 CPU(亚马逊的 EC2)的多核机器上运行一些代码，我想让我的 Java 进程使用所有
我是一名优秀的程序员,十分优秀！