make page stop scrolling when lightbox is active

[german95]

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.\[code\]<a href = "javascript:void(0)" onclick=" document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'"><img src="http://stackoverflow.com/questions/15731779/img/add.jpg"/></a></p><div id="light" class="white_content"><input name="degree_1" type="text" size="73" value="http://stackoverflow.com/questions/15731779/<?php echo $user_data_profile_education['degree_1'];?>"/></br></br>Grade</br><input name="grade_1" type="text" size="73" value="http://stackoverflow.com/questions/15731779/<?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="http://stackoverflow.com/questions/15731779/img/done_editing.jpg"/> </a></div><div id="fade" class="black_overlay"></div> \[/code\]and this is my css:\[code\].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;}\[/code\]