弹出窗口处于活动状态时禁用滚动
Disable scrolling while popup active
我按照在线教程(http://uposonghar.com/popup.html)创建了一个jQuery弹出窗口。
由于我对jQuery的了解不足,我无法按照我的要求使其工作。
我的问题:
- 我想在弹出窗口处于活动状态时禁用网页滚动。
- 活动时弹出窗口的背景淡入淡出颜色不适用于整个网页。
.CSS:
body {
background: #999;
}
#ac-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
}
JavaScript:
<script type="text/javascript">
function PopUp(){
document.getElementById('ac-wrapper').style.display="none";
}
</script>
.HTML:
<div id="ac-wrapper">
<div id="popup">
<center>
<p>Popup Content Here</p>
<input type="submit" name="submit" value="Submit" onClick="PopUp()" />
</center>
</div>
</div>
<p>Page Content Here</p>
一个简单的答案,您可以使用并且不需要您停止滚动事件,方法是将#ac-wrapper
的位置设置为固定。
例如
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
这将使弹出窗口的容器始终可见(顶部 - 左侧对齐),但仍允许滚动。
但是在打开弹出窗口的情况下滚动页面是 BAD!!(几乎总是)
您不希望允许滚动的原因是,如果您的弹出窗口不是全屏或半透明的,用户将看到内容滚动在弹出窗口后面。除此之外,当他们关闭弹出窗口时,他们现在将位于页面上的不同位置。
一个解决方案是,当您在 javascript 中绑定click
事件以显示此弹出窗口时,还要使用本质上具有以下规则的主体添加一个类:
.my-body-noscroll-class {
overflow: hidden;
}
然后,当通过触发某些操作或通过单击将其关闭时,您只需再次删除该类,允许在弹出窗口关闭后滚动即可。
如果用户随后在弹出窗口打开时滚动,则文档将不会滚动。当用户关闭弹出窗口时,滚动将再次可用,用户可以从他们离开的地方继续:)
要禁用滚动条:
$('body').css('overflow', 'hidden');
这将隐藏滚动条
背景淡入淡出的东西:
我创建了自己的弹出对话框小部件,它也有一个背景。我使用了以下 CSS:
div.modal{
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
background-color: #000;
display: none;
filter: alpha(opacity=25); /* internet explorer */
-khtml-opacity: 0.25; /* khtml, old safari */
-moz-opacity: 0.25; /* mozilla, netscape */
opacity: 0.25; /* fx, safari, opera */
}
我遇到了类似的问题; 想要在显示"弹出窗口"div 时禁用垂直滚动。
更改body
的溢出属性确实有效,但也会弄乱文档的宽度。
我选择了jquery来解决这个问题,并为滚动条使用了占位符。这是在没有绑定到scroll
事件的情况下完成的,因此这不会改变您的滚动条位置或导致闪烁:)
.HTML:
<div id="scrollPlaceHolder"></div>
.CSS:
body,html
{
height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
height:100%;
width:0px;
float:right;
display: inline;
top:0;
right: 0;
position: fixed;
background-color: #eee;
z-index: 100;
}
Jquery:
function DisableScrollbar()
{
// exit if page can't scroll
if($(document).height() == $('body').height()) return;
var old_width = $(document).width();
var new_width = old_width;
// ID's ' class to change
var items_to_change = "#Banner, #Footer, #Content";
$('body').css('overflow-y','hidden');
// get new width
new_width = $(document).width()
// update width of items to their old one(one with the scrollbar visible)
$(items_to_change).width(old_width);
// make the placeholder the same width the scrollbar was
$("#ScrollbarPlaceholder").show().width(new_width-old_width);
// and float the items to the other side.
$(items_to_change).css("float", "left");
}
function EnableScrollbar()
{
// exit if page can't scroll
if ($(document).height() == $('body').height()) return;
// remove the placeholder, then bring back the scrollbar
$("#ScrollbarPlaceholder").fadeOut(function(){
$('body').css('overflow-y','auto');
});
}
希望这有帮助。
如果简单地切换正文的"溢出-y"会破坏页面的滚动位置,请尝试使用以下 2 个函数 (jQuery):
// Run this function when you open your popup:
var disableBodyScroll = function(){
window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
$('body').css('overflow-y','hidden');
}
// Run this function when you close your popup:
var enableBodyScroll = function(){
$('body').css('overflow-y','scroll');
$(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
使用以下代码禁用和启用滚动条。
Scroll = (
function(){
var x,y;
function hndlr(){
window.scrollTo(x,y);
//return;
}
return {
disable : function(x1,y1){
x = x1;
y = y1;
if(window.addEventListener){
window.addEventListener("scroll",hndlr);
}
else{
window.attachEvent("onscroll", hndlr);
}
},
enable: function(){
if(window.removeEventListener){
window.removeEventListener("scroll",hndlr);
}
else{
window.detachEvent("onscroll", hndlr);
}
}
}
})();
//for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
> https://jsfiddle.net/satishdodia/L9vfhdwq/1/
.html:- 打开弹出窗口
弹出
弹出打开滚动停止现在...当我单击关闭时自动滚动运行。
关闭**css:-**
#popup{
position: fixed;
background: rgba(0,0,0,.8);
display: none;
top: 20px;
left: 50px;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
**jquery**:-
<script type="text/javascript">
$("#open_popup").click(function(){
$("#popup").css("display", "block");
$('body').css('overflow', 'hidden');
});
$("#close_popup").click(function(){
$("#popup").css("display", "none");
$('body').css('overflow', 'scroll');
});
</script>
我遇到了同样的问题并找到了摆脱它的方法,您只需要在弹出的元素上停止 touchmove 上的传播。对我来说,屏幕上出现的是全屏菜单,您无法滚动,现在您可以滚动。
$(document).on("touchmove","#menu-left-toggle",function(e){
e.stopPropagation();
});
这个解决方案对我有用。
.HTML:
<div id="payu-modal" class="modal-payu">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
.CSS:
.modal-payu {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.JS:
<script>
var btn = document.getElementById("button_1");
btn.onclick = function() {
modal.style.display = "block";
$('html').css('overflow', 'hidden');
}
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('payu-modal');
window.onclick = function(event) {
if (event.target != modal) {
}else{
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
}
span.onclick = function() {
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
</script>
我遇到了这个问题并尝试了几种解决方案,这是解决我的问题(https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/)的文章,非常简单!
它使用"固定体"解决方案,这在很多帖子中很常见。此解决方案的问题是,当弹出窗口关闭时,正文将滚动回顶部。但文章指出:通过使用解决方案时操作 CSS 顶部和位置属性,我们可以恢复滚动位置。
该解决方案的另一个问题是,您无法将解决方案应用于多个弹出窗口方案。所以我添加了一个变量来存储弹出窗口的计数,只是为了确保程序不会在错误的时间触发启动过程或重置过程。
这是我得到的最终解决方案:
// freeze or free the scrolling of the body:
const objectCountRef = { current: 0 }
function freezeBodyScroll () {
if (objectCountRef.current === 0) { // trigger the init process when there is no other popup exist
document.body.style.top = `-${window.scrollY}px`
document.body.style.position = 'fixed'
}
objectCountRef.current += 1
}
function freeBodyScroll () {
objectCountRef.current -= 1
if (objectCountRef.current === 0) { // trigger the reset process when all the popup are closed
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
}
你也可以在我的Codepen上看到演示:https://codepen.io/tabsteveyang/pen/WNpbvyb
Edit
有关"固定体"解决方案的更多信息
该方法主要是将 body 元素的 CSS 位置属性设置为"固定"以使其不可滚动。无论滚动多远,当主体固定时,它都会滚动回顶部,这是我不希望看到的行为。(想象一下,用户正在浏览一个长内容,几乎滚动到页面底部,突然出现一个弹出窗口,使页面滚动回顶部,这是一个糟糕的用户体验)
The solution from the article
此外,基于"固定正文"方法,该解决方案将正文的 CSS 顶部设置为"-window.scrollY px"的值,以使正文在固定时看起来像停留在当前滚动位置。此外,该解决方案使用正文的 CSS 顶部作为临时引用,以便当我们想要使正文再次可滚动时,我们可以按属性检索滚动位置。(请注意,您必须将位置乘以 -1 才能使其为正数)
- 在Angular 2中布线期间保持零部件处于活动状态
- 如何使bxslider仅在移动视图中处于活动状态
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- 返回上一页时,Javascript仍处于活动状态
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- 按钮处于活动状态,焦点无法在Mac FireFox上工作
- 禁用永久活动状态
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 网页在等待 AJAX 响应时变为非活动状态
- 广告拦截处于活动状态,然后不要打开超链接到新标签
- 如何创建至少 1 个框处于活动状态的复选框列表
- 弹出窗口处于活动状态时禁用滚动
- 如何以多个目标可以同时处于活动状态的方式实现“滚动间谍”
- 尝试在滚动子导航时保持父导航处于活动状态
- 滚动经过时使菜单类处于活动状态
- 向jQuery滚动条/侧菜单添加当前/活动状态
- 当滚动处于活动状态时,使页脚消失
- 在用户滚动时为链接中的导航添加活动状态