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

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.