Modal desde el enlace desplegable en Twitter Bootstrap

Question

Estoy tratando de tener un lanzamiento modal de un enlace que está en mi menú desplegable.El modal parece lanzar (el sitio se vuelve gris) pero no se puede ver.Los modales de los enlaces regulares no están en el trabajo desplegable.He engañado con el jQuery, pero nada ha funcionado desde que soy nuevo en JQuery.Aquí está mi código de sitio.

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

y aquí están los archivos JavaScript al final de la

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

Aquí está mi código de rieles por si acaso.

<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

I believe you may be running into a problem by including the modal div element within the navbar structure. My intuition is that you should include it somewhere near the end of your markup.