Javascript 改变'；HTML'；联系人窗体弹出和关闭时溢出属性

我在我的移动站点上建立了一个自定义弹出表单。除了弹出div后面的背景仍然可以滚动之外，大部分情况下一切都很好。我知道'HTML'{overflow:hidden；}将停止它，但我不知道如何在激活弹出窗口的javascript旁边执行该操作

链接（查看弹出窗口@media max width:991px-单击右下角的电子邮件按钮）：

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>

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

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

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

哦，你好！我们能帮忙吗？
我们是专业人士，我们所做的是帮助您满足您的任何和所有房地产需求。给我们一个叮当声，只是为了聊天，或列出您的财产，无论哪种方式，我们都希望收到您的来信。再见

首先使用
溢出：hidden创建一个css类
hidden

CSS:

在
toggle_visibility
中，根据您的情况向身体（或html）添加和删除类

JS:

用
overflow:hidden
创建一个类，在打开弹出窗口时将其添加到主体中，然后在关闭弹出窗口时删除该类。那么它是如何做到的呢？我该把它放在哪里？谢谢你的回答。在js中添加了另外两行之后，弹出窗口现在没有激活。@savphili那么您一定是遇到了一些错误。请参阅控制台。还将代码封装在
$（document.ready…
I放入$（document.ready）（函数（）{到开头和}）；到最后还是没用。当我添加代码$（'body'）.removeClass（'hidden'）；和.addClass它完全禁用弹出窗口，当我单击按钮时它不会激活。@savphili也许处理一下您的问题会有帮助，这样我们可以很容易地进行调试。这里是小提琴：我似乎无法让弹出窗口显示在小提琴上。我第一次用SO和Fiddle。对不起，我只是有点问题。