无法隐藏滚动条+窗体动作怪异

Question

我试图在以前的问题中找到一个解决方案，但是溢出:隐藏；对我不起作用。在上面有一个实验室背景图像，上面有一种药剂：www.walterbar.co.il，这个药剂应该是用一个表单打开一个覆盖。你可以看到，有一些滚动条出现和消失得很快。

此外，当我在自定义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>

表单的HTML：

<style>
input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}
input[type="phone"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="phone"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}
}
input[type="text"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="text"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}


</style>
<center> 

<label for=".elementor-6 .elementor-element.elementor-element-5m0lukt .wpcf7 input[type="text"]"><input type=text text* your-name placeholder="שם" required </input></label>

<label for= ".wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-required.wpcf7-validates-as-tel* your-email"> <input type="phone" tel* tel-196 input placeholder="טלפון" required</input></label>

<label for=".wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email"]"><input type=email email* your-email placeholder="אימייל" ID= "email" </input></label>

[submit "דברו איתנו"]
</center>

相关CSS：

.wpcf7-form-control.wpcf7-submit {
  width: 20% !important;
  text-align: center !important;
  background-color: #316e35 !important;
  color: white !important;
  font-family: open sans hebrew condensed;
  font-size: 20px;
  font-style: normal !important;
  font-weight: 900;
  border: 0;
  border-radius: 100em;
  display: inline-block;
  left: auto;
  right: auto;
  overflow: hidden;
  min-width: 158.5px;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

input[type="submit"]:hover {
  width: 20% !important;
  text-align: center !important;
  letter-spacing: 4px;
  background-color: white !important;
  color: #316e35 !important;
  font-family: open sans hebrew condensed;
  font-size: 20px;
  font-style: normal !important;
  font-weight: 900;
  animation: bounce 1s;
  border: 0;
  border-radius: 100em;
  display: inline-block;
  left: auto;
  right: auto;
  overflow: hidden;
  min-width: 158.5px;
}

[placeholder]:focus {
  background-color: rgba(221,221,221,0.8);
  transition: opacity 0.5s 0.5s ease;
  font-family: open sans hebrew condensed;
  font-style: italic;
}

body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
  background: #f9f9f9;
  color: black;
}

body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
  transition: opacity 0.5s 0.5s ease !important;
  opacity: 0 !important;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease;
  opacity: 0;
}

[placeholder] {
  width: 25% !important;
  background-color: rgba(255,255,255,0.8) !important;
  height: 40px !important;
  color: #333333 !important;
  margin: 0 auto;
  text-align: center !important;
  border-radius: 999em !important;
  display: inline-block;
  left: auto;
  right: auto;
  font-family: open sans hebrew condensed !important;
  font-style: italic;
  min-width: 164px;
}

[placeholder]:focus {
  background-color: rgba(221,221,221,0.8) !important;
  transition: opacity 0.5s 0.5s ease !important;
  font-family: open sans hebrew condensed !important;
  font-style: italic !important;
  border: 2px solid #316e35 !important;
  box-shadow: 0 0 10px #719ECE !important;
  min-width: 164px;
}

#wp-sticky-menu.wp-sticky-menu.headroom.slide {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center !important;
}

.wpsm-logo a {
  display: none;
}

.menu-image-title {
  font-family: Amatic SC;
  font-weight: 900;
  font-size: 25px;
  text-align: center !important;
}

.elementor-section-content-top>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap
:before {
  content: '';
  background-image: url("http://walterbar.co.il/wp-content/uploads/2017/03/Divider.png");
  height: 73px;
  top: 700px;
}
.elementor-7 .elementor-element.elementor-element-jnflk99 {
    position: relative;
    z-index: 9999;
}

#mc_embed_signup .mc-field-group{
  width:100% !important}

#fanctbox {overflow:hidden;}

#fancybox-wrap {overflow:hidden;}
#fancybox-outer {
  background-color: rgba(0, 0, 0, 0.3) !important;
border: none;
overflow:hidden;
width: 100%;
  height: 100%;
}

#contact_popup, #fancybox-content{
border:none;
  overflow:hidden;
  background-color: rgba(0, 0, 0, 0);

Answer 1

将overflow:hidden!important添加到#fancybox-content > div。

从overflow:hidden中删除#fancybox-outer以显示完整的X按钮。

在padding:0中设置#contact_popup, #fancybox-content并添加margin:auto。

将display:block设置为.wpcf7-form-control.wpcf7-submit。

如果您正在使用Chrome或Firefox，您可以右键单击任何元素，并从上下文菜单中选择检查元素。您可以直接进行更改并看到效果。(更改将不会保存)。

Answer 2

在fancybox-内容中，您使用内联style="width:auto;height:auto;overflow:自动设置一个div；位置:相对；“将溢出设置为溢出:隐藏，以在打开窗体时防止滚动条闪烁。

若要禁用窗体打开上的滚动体，请使用jquery：

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

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

});

若要在第一次关闭时再次设置滚动活动，请向按钮中添加类或id，如下所示：

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

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

});

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

Answer 3

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

将此插入到脚本标记中

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