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