0

我正在尝试创建一个在您选择我网站上的按钮时出现的联系表格；

http://acewc.net23.net/

但是当您按下向下箭头时，您会看到围绕文本“立即获取报价”的初始框向下移动了几个像素，我无法弄清楚它是如何/为什么会这样？！

jquery代码很简单；

<script>
        $(document).ready(function(){
            window.onload = function(){
                $('#contact-form').hide();
        };

            $("#dd").click(function(){
                $('#contact-form').fadeToggle(750);
            });

        });
    </script>

我有相当多的 css 文件，所以不想发布所有代码，但你认为它会是带有“获取报价”文本的框还是导致它移动的实际表单？ ！

在此先感谢人们！

4

3 回答 3

1

首先删除（以防止在页面加载时显示表单）

 window.onload = function(){
                $('#contact-form').hide();
        };

并更改/添加到您的 css ：

#contact-form {
  position: aboslute; /* Change relative to absolute */
  display: none; /* Add this to hide the form */
  top: 175px; /* Position in page */
  width: 450px;
}
于 2013-08-06T16:07:15.070 回答
0

根据我的经验，转换包装器 div 比转换表单本身更好。试试这个：

<div id="contact-form-wrapper" style="display: none;">
    <form id="contact-form" action="/" method="post">
        ...
    </form>
</div>

$("#dd").on('click', function() {
    $('#contact-form-wrapper').fadeToggle(750);
});
于 2013-08-06T15:44:06.010 回答
0

我不同意他上面的回答，我觉得元素的绝对定位不是你想要的。

我会删除 right_section_title 上的绝对位置，然后在您的表单元素上，您可以删除“位置：相对；” 和“顶部：46px；” （我认为这看起来不错），或者您可以更改“top: 46px;” 将表格放置在您想要的位置。

 .right_section_title {
 font: 14pt "Trebuchet MS", Helvetica, sans-serif, Arial, sans-serif;
 font-weight: lighter;
 background-color: #a2d0ff;
 text-transform: uppercase;
 vertical-align: middle;
 color: #FFFFFF;
 border: 15px solid #a2d0ff;
 border-radius: 10px;
 height: 22px;
 width: 330px;
 -webkit-box-shadow: 0px -2px 1px rgba(50, 50, 50, 0.75);
 -moz-box-shadow: 0px -2px 1px rgba(50, 50, 50, 0.75);
 box-shadow: 0px -2px 1px rgba(50, 50, 50, 0.75);
 }


 #contact-form {
 text-shadow: 0 1px 0 #FFF;
 border: 1px;
 border-color: #a4a4a4;
 border-style: none;
 border-radius: 1px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 background: #a2d0ff;
 padding-left: 5px;
 }

另外，附带说明一下，您的 jquery 不需要加载窗口，文档准备处理，您可以将其更改为：

 <script>
    $(document).ready(function(){

       $('#contact-form').hide();


        $("#dd").click(function(){
            $('#contact-form').fadeToggle(750);
        });

    });
 </script>

尽管如果您决定在 css 中不显示任何内容，如上所述，那么您根本不需要隐藏它。我认为那将是最好的。

于 2013-08-06T16:20:25.347 回答