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" を設定して、トグルする特定のモーダルをターゲットにします。

別の提案として、リンクのオンクリックを登録する代わりに、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>');
});
于 2013-04-17T18:37:38.937 に答える
-1

おそらく、「bootstrap.js」(具体的には「bootstrap-modal.js」) が含まれていない可能性があります。

ここで (モーダルを使用して) 「パッケージ」を作成し、ページに JavaScript を含めてみてください: http://twitter.github.io/bootstrap/customize.html

于 2013-04-17T18:30:12.627 に答える