Модал от раскрывающегося списка в Twitter Bootstrap

Question

Я пытаюсь иметь модальный запуск из ссылки, которая находится в моем выпадающем меню. Кажется, что модальный запуск (сайт серого цвета), но его не видно. Модалы из регулярных ссылок не в выпадающей работе просто отлично. Я обманул jquery, но ничего не получилось, так как я новичок в jquery. Вот мой код сайта.

<nav class="pull-right"> 
<ul class="nav"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Item<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <div id="DeleteItem" class="modal hide fade"> 
       <div class="modal-header"> 
        <a data-dismiss="modal" class="close">×</a> 

        <h3>Delete My Item?</h3> 
       </div> 
       <div class="modal-body"> 
        <p>Are you sure you really want to delete My Item?</p> 
       </div> 
       <div class="modal-footer"> 
        <a rel="nofollow" data-method="delete" class="btn btn-primary" href="/items/myitem">Delete 
         Item</a> 
        <a data-dismiss="modal" class="btn" href="#">Cancel</a> 
       </div> 
      </div> 
      <!-- Delete Item Modal --> 
      <li><a href="/items/myitem/edit">Edit Item</a></li> 
      <li><a data-toggle="modal" data-target="#DeleteItem" href="/items/myitem">Delete Item</a></li> 
     </ul> 
    </li> 
</ul> 

А вот JavaScript-файлы в конце

<!-- Javascript placed at the end of the document so the pages load faster --> 

<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script> 

Вот мой код рельсы на всякий случай.

<li class="dropdown"> 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#"><%= @item.name %><b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <%= render "items/delete" %><!-- Delete Item Modal --> 
       <li><%= link_to 'Edit Item', edit_item_path(@item) %></li> 
       <li><%= link_to 'Delete Item', @item, 
           "data-toggle" => "modal", "data-target" => "#DeleteItem" %></li> 
      </ul> 
     </li> 

    <div class="modal hide fade" id="DeleteItem"> 
    <div class="modal-header"> 
    <a class="close" data-dismiss="modal">×</a> 
    <%= content_tag :h3, "Delete #{@item.name}" + "?" %> 
    </div> 
    <div class="modal-body"> 
    <%= content_tag :p, "Are you sure you really want to delete #{@item.name}" + "?" %> 
    </div> 
    <div class="modal-footer"> 
    <%= link_to 'Delete Item', @item, method: :delete, :class => "btn btn-primary" %> 
    <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
    </div> 
</div> 

Answer 1

Я полагаю, что вы можете столкнуться с проблемой, включив в нее элемент модального div в структуре навигатора. Моя интуиция заключается в том, что вы должны включить ее где-нибудь ближе к концу разметки.