I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from 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>
This is my custom CSS styling:
.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;
}