在弹出联系表单时更改'HTML'溢出属性并关闭

Question

我在我的手机网站上建立了一个自定义的弹出表单。在大多数情况下，一切都很好，除了弹出式div后面的背景仍然可以滚动。我知道'HTML' {overflow:hidden;}会阻止它，但我不知道如何执行该动作以及我拥有的激活弹出窗口的javascript。

链接(查看弹出窗口@media max-width: 991px -点击右下角的电子邮件按钮):

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 we help?</h3>
          <p>We are professionals at what we do and what we do is help you with any and all of your real estate needs. Give us a jingle just to chat, or to list your property, either way we'd love to hear from you. Bye!</p>
          <?php echo do_shortcode( '[contact-form-7 id="3931" title="Contact Form"]' ); ?>
      </div>
   </div>
</div>

总结:我想改变HTML {overflow:hidden;}在弹出窗口的滚动，然后切换回HTML {overflow:visible;}当弹出窗口关闭。

小提琴链接: https://jsfiddle.net/fo93w7v1/1/

Answer 1

首先用overflow : hidden;创建一个css类hidden

CSS:

.hidden{
  overflow : hidden;
}

在toggle_visibility中添加和删除类到您的身体(或html)基于您的条件。

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";
       } 
    }