2013-04-17 3 views
0

Ниже я использую приведенный ниже код для создания модального файла, который заполняется страницей на основе идентификатора, который затем позволяет редактировать местоположение. Как бы модальная мода не открывалась. Может кто-нибудь сказать мне, почему?Twitter Bootstrap Modal не открывается?

@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> 

Есть ли что-то, что мне не хватает?

+0

попробовать jqueryUI диалоговое Http: // jqueryui.com/dialog/ – Omu

+0

@Kyle, помогло ли решение решить проблему? – PSL

ответ

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" на элемент контроллера, как кнопка, вместе с target-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>'); 
}); 
-1

Вероятно, вы пропустили включение «bootstrap.js» (или, в конкретных, «бутстрапных-modal.js»)

Try, чтобы сделать свой «пакет» здесь (с модальностей) и включить JavaScript на странице: http://twitter.github.io/bootstrap/customize.html

Смежные вопросы