Bootstrap莫代爾不工作（內置回調不開火）

Question

這讓我瘋狂。

我有2個模態窗口：

<form action="#" method="post" id="newsletter" class="modal fade"> 
    <div class="modal-body span8"> 
     <h3>Signup for our newsletter<span class="close" data-dismiss="modal">&times;</span></h3> 
     <label> 
      <span>First Name</span> 
      <div><input type="text" name="fname"></div> 
     </label> 
     <label> 
      <span>Last Name</span> 
      <div><input type="text" name="lname"></div> 
     </label> 
     <label> 
      <span>Email Address</span> 
      <div><input type="text" name="email"></div> 
     </label> 
     <button type="submit">Submit</button> 
    </div> 
</form> 
<form action="/search/" method="get" id="search" class="modal fade"> 
    <div class="modal-body span12"> 
     <label>Search: <input type="text" name="q"></label> 
     <button type="submit">Search</button> 
    </div> 
</form> 

和鏈接觸發每個模態：

<a href="#newsletter"><i class="icon-newsletter"></i> Get notified</a> 
<a href="#search"><i class="icon-search"></i> Search Website</a> 

用下面的相關造型：

.modal-backdrop { 
    position:fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    z-index:1040; 
    background-color:#FFF; 
} 
    .modal-backdrop.fade { 
     opacity:0; 
    } 
    .modal-backdrop, .modal-backdrop.fade.in { 
     display:block; 
     opacity:.9; 
     filter:alpha(opacity=90); 
    } 

.modal { 
    position:fixed; 
    top:10%; 
    left:0; 
    z-index:1050; 
    width:100%; 
} 
    .modal.fade { 
     -webkit-transition: opacity .3s linear, top .3s ease-out; 
     -moz-transition: opacity .3s linear, top .3s ease-out; 
     -ms-transition: opacity .3s linear, top .3s ease-out; 
     transition: opacity .3s linear, top .3s ease-out; 
     top:-100%; 
    } 
    .modal.fade.in { 
     top:10%; 
    } 
    .modal-body{ 
     margin: 0 auto; 
     float: none; 
     background: #FFF; 
     -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); 
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); 
     -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); 
     box-shadow: 0 3px 7px rgba(0, 0, 0, .3); 
    } 

而觸發一些自定義的JS模式（所有＃鏈接將滾動到或以其他方式打開目標，如果它是模態的話）：

$('body').on('click', 'a[href^="#"]', function(e){ 
    e.preventDefault(); 
    var target = $(this).attr('href'); 
    var top = 0; 

    if($(target).hasClass('modal')){ 
     $(target).modal('toggle'); 

     if($(window).width() < 960) 
      $('html, body').animate({scrollTop:0}); 
     return; 
    } 

    if($(target).length > 0){ 
     top = $(target).offset().top - 65; 
    } 

    $('html,body').animate({scrollTop:top},500); 
}); 

點擊後，背景會顯示，但不是模態本身;顯示添加'in'類的內置回調函數不會觸發。我已經調試了足夠多，以弄清楚，但這個（本質上）精確的代碼在另一個網站上完全正常工作的事實表明，我的HTML/CSS/JS可能會有某些事情。但是，我無法弄清楚我的生活。

想法？

Answer 1

原來我從未包含.fade樣式;感謝PSCoder製作小提琴，這是因爲它包括完整的bootstrap css。

.fade { 
    opacity: 0; 
    -webkit-transition: opacity 0.15s linear; 
    -moz-transition: opacity 0.15s linear; 
    -o-transition: opacity 0.15s linear; 
    transition: opacity 0.15s linear; 
} 

.fade.in { 
    opacity: 1; 
}