0

我正在使用下面的代码创建一个模式，该模式会根据 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>

有什么我想念的吗？

4

2 回答 2

3

你几乎是对的：- 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" 以定位要切换的特定模式。

只是一个替代建议，您也可以通过订阅显示事件来修改模式，而不是注册点击链接...。

$('.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>');
});
于 2013-04-17T18:37:38.937 回答
-1

可能您缺少包含“bootstrap.js”（或者，具体而言，“bootstrap-modal.js”）

尝试在此处制作您的“包”（使用 Modals）并在您的页面中包含 javascript：http: //twitter.github.io/bootstrap/customize.html

于 2013-04-17T18:30:12.627 回答