javascript - Change 'HTML' overflow property upon contact form popup and close out -

i built custom popup form on mobile site. part except background behind popup div still scrollable. know 'html' {overflow:hidden;} stop it, don't know how execute action along side javascript have activates popup.

link (view popup @media max-width: 991px - click on email botton on bottom right):

http://www.eastvalleyurban.com/blank-community-template-2

javascript:

<script type="text/javascript"> <!--     function toggle_visibility(id) {        var e = document.getelementbyid(id);        if(e.style.display == 'block')           e.style.display = 'none';        else           e.style.display = 'block';     } //--> </script> 

html:

<div id="contact-popup-container" style="display: none" class="popup-container">    <div id="popup-wrapper">       <div id="popup-contents">           <div id="close-button"><a href="javascript:void(0)" onclick="toggle_visibility('contact-popup-container');"><i class="fa fa-times fa-lg"></i></a></div>           <h3>oh, hi there! how can help?</h3>           <p>we professionals @ , , of real estate needs. give jingle chat, or list property, either way we'd love hear you. bye!</p>           <?php echo do_shortcode( '[contact-form-7 id="3931" title="contact form"]' ); ?>       </div>    </div> </div> 

summary: change html {overflow:hidden;} upon rollout of popup , switch html {overflow:visible;} when popup closed.

link fiddle: https://jsfiddle.net/fo93w7v1/1/

first make css class hidden overflow : hidden;.

css:

.hidden{   overflow : hidden; } 

in toggle_visibility add , remove class body(or html) based on condition.

js:

function toggle_visibility(id) {        var e = document.getelementbyid(id);        if(e.style.display == 'block'){           e.style.display = 'none';           $('body').removeclass('hidden'); //or document.body.style.overflow = "scroll";        }        else{           e.style.display = 'block';           $('body').addclass('hidden');// or document.body.style.overflow = "hidden";        }      }