当灯箱处于活动状态时，使页面停止滚动 [英] make page stop scrolling when lightbox is active

问题描述

我有以下包含表格的灯箱.一切正常.我唯一的问题是，当灯箱处于活动状态时，如何使html页面停止滚动.

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.

<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>    

这是我的 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;
}

推荐答案

添加溢出:显示灯箱时隐藏在您的身体中；溢出:隐藏灯箱时自动显示.

Add overflow: hidden to your body when you show the lightbox and overflow: auto when you hide it.

这篇关于当灯箱处于活动状态时，使页面停止滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！