Html 无法隐藏滚动条+窗体的行为异常

我试图在前面的问题中找到解决方案，但溢出：隐藏；这对我不起作用。这里有一张实验室背景图片，上面有一种药剂： ，药水应该用一个形状打开一个覆盖层。你可以看到有一些滚动条出现和消失非常快

另外，当我在自定义CSS插件中插入溢出时，X按钮的行为很奇怪

另一个问题是，由于某种原因，表单不会与中心对齐，而不是在覆盖窗口中，也不是在底部

知道为什么吗？我为这种奇怪的语言道歉- 提前谢谢

覆盖的HTML代码：

<a href="#contact_popup" class="fancybox">
<img id="walterbarpotion" src="http://walterbar.co.il/wp-content/uploads/2017/03/animation_SMALL.gif" style="max-width:250%">
</a>
 <div style="display:none;background-color:black;" class="fancybox-hidden">
    <div id="contact_popup">
        [contact-form-7 id="342" title="צור קשר"]
    </div>
 </div>

---

在fancybox内容中，您使用inline style=width:auto设置了一个div；高度：自动；溢出：自动；位置：相对位置； 将overflow设置为overflow:hidden，以防止在打开表单时滚动条闪烁

要使用jquery禁用表单打开时的滚动体，请执行以下操作：

$('.walterbarpotion').click( function(){

    $('body').css('overflow','hidden');   

});

要在第一次关闭时再次将滚动设置为活动，请向按钮添加类别或id，以便：

$('#fancybox-overlay,#button_id').click( function(){

    $('body').css('overflow','scroll'); 

});

---

这并不完美，因为我需要将其集成到表单检查系统中，以防止在表单检查失败时显示滚动条。希望可以帮助您了解它是如何工作的。

溢出表单由jquery脚本设置动画，动态更改高度，最后将高度设置为自动。当高度以像素为单位快速设置动画时，会导致溢出和滚动条

将其插入脚本标记中

$("#walterbarpotion").click(function(){$("#fancybox-content").css({"overflow":"hidden !important"})})

添加溢出：隐藏！对于fancybox内容>div很重要

移除溢出：从fancybox外部隐藏以显示完整的X按钮

在contact_弹出窗口中设置填充：0，fancybox内容并添加边距：自动

设置显示：为.wpcf7-form-control.wpcf7-submit设置块

---

如果您使用的是Chrome或Firefox，您可以右键单击任何元素，然后从上下文菜单中选择Inspect element。您可以直接进行更改并查看效果。更改将不会保存。

请提供相关代码。我编辑了我的主要帖子，并试图找到与问题相关的任何内容。说到编码，我不是一个专家，所以我想如果你能在我提供的链接上看到实时网站，会容易得多。顺便说一句，我很确定一些编码是没有必要的，当我试图用CSS设计网站时，我遇到了一些问题，当我设法得到我想要的东西时，我不想碰任何东西。我想你有一个输入错误FantBox{overflow:hidden；}你的怪异行为是什么意思？我明白你的意思。虽然我现在对表格有另一个恼人的问题，但我对我的回答做了进一步的修改。网站底部的表单代码与fancybox中的表单代码相同，当您悬停submit按钮时，它会不断弹出粘性菜单。出现这种情况的原因是display:block。您可以尝试为第一个submit按钮添加一个id，或者通过引用css中不同的父元素进行区分，然后使用它来设置display:block！重要信息，因此提交按钮的原始css不需要更改。或者您是否也需要为第二个提交按钮居中？另一个棘手的选择是增加一个左边距，把它推到中间。需要它们都居中。因此，添加左边距不会因浏览器和窗口大小的不同而有所不同？实际上，尝试使用上述原始解决方案，但添加！重要的我看了看它，似乎按钮在悬停时向左移动，所以我想它可能正在恢复为内联块。如果这不能解决问题，也许我们应该把它转移到聊天上：否则我会更新答案。

$('#fancybox-overlay,#button_id').click( function(){

    $('body').css('overflow','scroll'); 

});

$("#walterbarpotion").click(function(){$("#fancybox-content").css({"overflow":"hidden !important"})})