Question

我在页脚上创建了一个小回调弹出窗口 http://bit.ly/1MThJ5w

问题是当我点击文本框时它就消失了。我不知道如何阻止它。有没有人对如何解决这个问题有任何想法？感谢。

它应该只在我点击回来时关闭并打开

而且关闭和打开的箭头也没有显示

我的代码段：

<script type="text/javascript">   
$(document).ready(function() {
  $('.foot').click(function() {
    if($('.foot').hasClass('slide-up')) {
      $('.foot').addClass('slide-down', 1000);
      $('.foot').removeClass('slide-up'); 
    } else {
      $('.foot').removeClass('slide-down');
      $('.foot').addClass('slide-up', 1000); 
    }
  });
});

CSS代码：

/*Contact Styles
------------------------------------*/
.contact{       
    width:28%;
    float:left; 
    padding-left:20px;
    background:#001832;
    color:#FFFFFF;
    padding-top:15px;
    padding-bottom:12px;
}
.contact h2{
    font-size:27px;
    font-family:impact;
    font-weight:500;
    color:#fff;
}
.contact form{
    margin-top:6px;
}
.contact label{
    font-size:10px;
}
.contact input{
    width:210px;
    color:#666;
}

.contact a{
    text-decoration:none;
    text-align: center;
    background: none repeat scroll 0% 0% #0060A3;
    color: #FFF;
    display: inline-block;
    padding: 12px 37px;
    margin-top: 5px;
    font-family: arial;
    font-weight: 700; 
    margin-bottom:15px;
}

.contact .btn{
    text-decoration:none;
    text-align: center;
    background: #0060A3;
    color: #FFF;
    display: inline-block;
    padding: 10px 20px;
    margin-top: 5px;
    font-family: arial;
    font-weight: 700; 
    margin-bottom:15px;
    font-size:20px;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
}

/*Slider footer*/

.foot {
    position:fixed;
    width: 300px;
    z-index: 10000;
    text-align:center;
    height: 500px;
    font-size:18px;
    color: #000;

    display: flex;
    justify-content: center; /* align horizontal */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -185px;
}

.slide-up
{
    bottom: -445px !important;
}

.slide-down
{
    bottom: -185px !important;
}

.call_back{
    background:#405E51;
    padding:10px;
    margin-bottom:10px !important;
    color:#fff;
}

#closer{
    background:none;
    width:10px;
    margin-top: -25px;
    margin-right: 15px;
    float:right;
}

#closer{
    background:none;
    width:10px;
    margin-top: -25px;
    margin-right: 15px;
    float:right;
}

Answer 1

您的点击事件绑定到错误的元素。改为将其更改为“call_back”类。

改变这个：

$('.foot').click(function() {
  // your code

}）;

对此：

  $('.call_back').click(function() {
      // your code
  });

单击文本框时弹出框消失

1 个答案: