ruby-on-rails - 来自 Twitter Bootstrap 中下 zipper 接的模态

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

我相信您在导航栏结构中包含模态 div 元素时可能会遇到问题。我的直觉是您应该将它包含在靠近标记末尾的位置。