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”的包含（或者，具體來說，“bootstrap-modal.js”）

嘗試在此處創建“包”（使用模式）並在頁面中包含javascript： http ： //twitter.github.io/bootstrap/customize.html