Question

我试图在以前的问题中找到一个解决方案，但溢出：隐藏;不适合我。这里有一个实验室背景图片，上面有药水： www.walterbar.co.il，药水应该用表格打开覆盖层。您可以看到有一些滚动条出现并且消失得非常快。

此外，当我在Custom 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

在fancybox内容中，你设置了一个div，内联样式=“width：auto; height：auto; overflow：auto ; position：relative;” 将溢出设置为溢出：隐藏以防止打开表单时滚动条闪烁。

使用jquery：

禁用表单打开时正文上的滚动

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

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

});

要在关闭1st时再次激活滚动，请将类或ID添加到按钮，然后：

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

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

});

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

Answer 2

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

将其插入脚本标记

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

Answer 3

将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，则可以右键单击任何元素，然后从上下文菜单中选择“检查元素”。您可以直接进行更改并查看效果。（不会保存更改。）

无法隐藏滚动条+形式表现得很奇怪

3 个答案: