Modal de la liaison déroulante dans Twitter Bootstrap

Question

J'essaie d'avoir un lancement modal à partir d'un lien dans mon menu déroulant.Le modal semble lancer (le site va gris) mais on ne peut pas être vu.Les modaux de liens réguliers pas dans le travail déroulant très bien.J'ai dupé de la jQuery mais rien n'a fonctionné depuis que je suis nouveau à JQuery.Voici mon code de site.

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

et voici les fichiers JavaScript à la fin 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>

Voici mon code mon rails au cas où.

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