弹出框消失，当我点击文本框

Question

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

问题是，当我点击它消失的文本框中。我不知道该如何阻止。有没有人有任何想法如何解决这个问题？谢谢。

它应该只关闭和打开，当我点击 - BACK CALL

而且还密切和开放的箭头没有显示以及

我的代码片段：

<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 
    });