Twitter Bootstrap模式無法打開？

Question

我正在使用下面的代碼創建一個模式，彈出填充頁面基於該id，然後允許您編輯位置。模態不會打開。有人能告訴我爲什麼？

@model IEnumerable<LocApp.Models.Location> 

<table class="table table-bordered"> 
    <thread> 
     <tr> 
      <th>Name</th> 
      <th>Active</th> 
      <th>Actions</th> 
     </tr> 
    </thread> 
    @foreach (var item in Model) 
    { 
     <thread> 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.name) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.active) 
       </td> 
       <td> 
        <a href="@Url.Action("Edit", "Location", new { id = item.id})" class="edit" data-target="#@item.id">Edit</a> | 
        @Html.ActionLink("Details", "Details", new { id = item.id }) | 
        @Html.ActionLink("Delete", "Delete", new { id = item.id }) 
       </td> 
      </tr> 
     </thread> 

     <div class="modal hide fade" id="@item.id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Edit @item.name</h3> 
      </div> 
      <div class="modal-body"> 
      </div> 
     </div>   
    } 
</table> 
<script> 
    $('a.edit').on('click', function (e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>'); 
    }); 
</script> 

有什麼我失蹤了嗎？

Answer 1

您是差不多吧： - http://jsfiddle.net/wr9sE/1/

你需要指定data-toggle="modal"和data-target="#itemid"

<a href="@Url.Action("Edit", "Location", new { id = item.id})" data-toggle="modal" class="edit" data-target="#@item.id">Edit</a> 

激活模式而不編寫JavaScript。在控制器元素（如按鈕）上設置data-toggle =「modal」以及data-target =「＃foo」或href =「＃foo」以將特定模式作爲切換目標。

只是一個替代建議，您還可以通過訂閱Show事件過於而不是在單擊該鏈接註冊修改模式....

$('.modal').on('show',function(){ 
    var url = $(event.srcElement).attr('href'); 
     $(".modal-body", this).html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>'); 
}); 

Answer 2

也許你錯過了「bootstrap.js」（或者，在特定的「自舉modal.js」）

嘗試的包容，讓您的「一攬子」這裏（與情態動詞）並添加JavaScript在你的頁面： http://twitter.github.io/bootstrap/customize.html