Модаль от раскрывающегося списка в 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>

.

Вот мой код Rails на всякий случай.

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