在选项卡式导航中打开模态 - Bootstrap 3&Rails 4

Question

我的网站页面上有一个标签导航器.导航器显示正常,但在其中一个选项卡中,我有一个表,每个行上都有一个"标记完成"按钮.每个按钮打开一个模态.

当我在桌面导航器外面放置桌子时,按钮工作正常,模态出现没有任何问题.现在,当我尝试打开模态时,它看起来没有焦点,无法点击.我也无法退出.

您可以在下拉按钮显示的模态上看到这是另一个错误.关于可能导致这种情况的任何想法？

<div class="bs-docs-example">
  <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#requests" data-toggle="tab">Requests</a>
    </li>
    <li><a href="#offers" data-toggle="tab">Offers</a>
    </li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

      <ul class="dropdown-menu">
        <li><a href="#dropdown1" data-toggle="tab">@fat</a>
        </li>
        <li><a href="#dropdown2" data-toggle="tab">@mdo</a>
        </li>
      </ul>
    </li>
  </ul>

  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="requests">

      <div class="contain">
        <h5>My Requests <span class="badge badge-primary" style="font-size: 1em"><%= @requests.count %></span></h5>
        <!--<h1><%= t '.title', :default => model_class.model_name.human.pluralize.titleize %></h1>-->

        <table class="table table-striped">
          <thead>

          <tr>
            <th>Replies</th>
            <th><%= model_class.human_attribute_name(:title) %></th>
            <th><%= model_class.human_attribute_name(:created) %></th>

          </tr>

          </thead>
          <tbody>
          <% @requests.each do |request| %>


              <% if request.complete.nil? %>

                  <tr>

                    <td>
                      <div class="">

                        <h5>
                          <span class="badge badge-info" style="font-size: .7em;"><%= link_to current_user.mailbox.inbox.all.where(:subject => request.title).count, responses_conversations_path(:favour_select => request.title), :style => 'color:#FFFFFF;' %></span>
                        </h5>

                      </div>
                    </td>

                    <td><%= link_to request.title, request_path(request) %></td>
                    <td><%= request.created_at.strftime("%I:%M %p, %b %d") %>

                      <%= button_tag "",
                                     :id => 'contacts', "data-toggle" => "modal",
                                     'data-target' => '#showContactsModal_' + request.id.to_s,
                                     :class => 'btn btn-success', :style => "border-radius: 0;" do %>
                          <i class="glyphicon glyphicon-ok"></i> Mark Complete
                      <% end %></td>
                    <div class="modal fade" id="<%= 'showContactsModal_%s' % [request.id] %>">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                              <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">
                              Who helped with this favour?</h4>
                          </div>
                          <div class="modal-body">
                            <%= render :partial => 'mark_complete', :locals => {:conversations => @conversations, :request => request} %>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->


                    <td>
                      <%= button_to edit_request_path(request), :method => :get, :class => 'btn btn-info', :style => "border-radius: 0;" do %>
                          <i class="glyphicon glyphicon-pencil"></i>
                      <% end %>

                      <%= button_to request_path(request),
                                    :method => :delete,
                                    :data => {:confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?'))},
                                    :class => 'btn', :style => "border-radius: 0;" do %>
                          <i class="glyphicon glyphicon-trash"></i>
                      <% end %>
                    </td>

                  </tr>
              <% end %>
          <% end %>

          </tbody>
        </table>


      </div>

    </div>
    <div class="tab-pane fade" id="offers">

      <div class="contain">
        <h5>My Offers <span class="badge badge-primary" style="font-size: 1em"><%= @offers.count %></span></h5>

        <!--<h1><%= t '.title', :default => model_class.model_name.human.pluralize.titleize %></h1>-->

        <table class="table table-striped">
          <thead>
          <tr>
            <th>Replies</th>
            <th><%= model_class.human_attribute_name(:title) %></th>
            <th><%= model_class.human_attribute_name(:created) %></th>

          </tr>
          </thead>
          <tbody>
          <% @offers.each do |offer| %>
              <tr>

                <td>
                  <div class="">

                    <h5>
                      <span class="badge badge-info" style="font-size: .7em;"><%= link_to current_user.mailbox.inbox.all.where(:subject => offer.title).count, responses_conversations_path(:favour_select => offer.title), :style => 'color:#FFFFFF;' %></span>
                    </h5>

                  </div>
                </td>

                <td><%= link_to offer.title, offer_path(offer) %></td>
                <td><%= offer.created_at.strftime("%I:%M %p, %b %d") %>



                  <%= button_to edit_offer_path(offer), :method => :get, :class => 'btn btn-info', :style => "border-radius: 0;" do %>
                      <i class="glyphicon glyphicon-pencil"></i>
                  <% end %>

                  <%= button_to offer_path(offer),
                                :method => :delete,
                                :class => 'btn', :style => "border-radius: 0;" do %>
                      <i class="glyphicon glyphicon-trash"></i>
                  <% end %>

                </td>

              </tr>

          <% end %>


          </tbody>
        </table>

      </div>

    </div>
    <div class="tab-pane fade" id="dropdown1">

    </div>
    <div class="tab-pane fade" id="dropdown2">

    </div>
  </div>
</div>

Answer 1

尝试将模态div移到外面<table>.这在文档中提到:

模态标记放置

始终尝试将模态的HTML代码放在文档的顶级位置,以避免影响模态外观和/或功能的其他组件.