javascript 当灯箱处于活动状态时使页面停止滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15731779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make page stop scrolling when lightbox is active
提问by 33528
I have the following lightbox which includes a form. Everything works fine. My only problem is how to make the html page stop scrolling when the lightbox is active.
我有以下灯箱，其中包含一个表单。一切正常。我唯一的问题是如何使 html 页面在灯箱处于活动状态时停止滚动。
<a href = "javascript:void(0)" onclick="
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">
<img src="img/add.jpg"/></a></p>
<div id="light" class="white_content">
<input name="degree_1" type="text" size="73"
value="<?php echo $user_data_profile_education['degree_1'];?>"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73"
value="<?php echo $user_data_profile_education['grade_1'];?>"/>
<a href = "javascript:void(0)" onclick="
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'">
</br><img src="img/done_editing.jpg"/> </a></div>
<div id="fade" class="black_overlay"></div>
and this is my css:
这是我的css：
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 220%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 45%;
left: 30%;
width: 32%;
height: 51%;
padding: 30px;
padding-left:50px;
border: 5px solid green;
background-color: white;
z-index:1002;
overflow: auto;
}
回答by Kaloyan
Add overflow: hidden to your body when you show the lightbox and overflow: auto when you hide it.
当您显示灯箱时添加溢出：隐藏到您的身体，并在您隐藏它时添加溢出：自动。
回答by user3152459
Use onLoad/onClose to change the css of the div that holds the page content
使用 onLoad/onClose 改变保存页面内容的div的css
Setting .lb_overlay height is a nice touch, add the same "margin" from the top of the modal to the bottom so scrolling to the bottom doesn't just sit right at the bottom of the window
设置 .lb_overlay 高度是一个不错的选择，从模态顶部到底部添加相同的“边距”，因此滚动到底部不会只是坐在窗口的底部
var modal = $("#modal"),
wrapper = $("#wrapper")
$("#modalTrigger").click(function(){
modal.lightbox_me({
centered: true,
onLoad : function(){
wrapper.css({
"position" : "fixed",
"width" : "100%"
})
$(".lb_overlay").css("height" , parseInt($(window).height()) + parseInt(modal.css("top") ) + "px" )
},
onClose : function(){
wrapper.css("position" , "relative")
}
})
})
回答by Simran Malhotra
Just add this script to disable scrollign in lighbox
只需添加此脚本即可禁用灯箱中的滚动
<script>
lightbox.option({
disableScrolling:true
})
</script>
