title: Pop up box disappears when I click the text box
body: <p>I have created a small call back popup on the footer
  <a href="http://bit.ly/1MThJ5w" rel="nofollow">http://bit.ly/1MThJ5w</a></p>
  
  <p>The problem is when I click the text box it disappeared. I don't know how to stop that. Does anyone has any ideas on how to fix this? Thanks.</p>
  
  <p>It should only close and open when I click- CALL BACK</p>
  
  <p>And also the close and open arrows are not showing as well</p>
  
  <p>My code snippet:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;   
  $(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); 
      }
    });
  });
  </code></pre>
  
  <p></p>
  
  <p>CSS CODE:</p>
  
  <pre><code>/*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;
  }
  </code></pre>