Opening a modal inside of a tabbed nav - Bootstrap 3 & Rails 4

Question

I have a tabbed navigator on a page of my site. The navigator appears fine, but in one of the tabs, I have a table that has a "Mark Complete" button on each of its rows. Each button opens a modal.

When I had the table on their own outside of the tabbed navigator, the button worked fine and the modal appeared without any issues. Now when I try to open the modal, it appears out of focus and can't be clicked. I have no way of exiting it either.

You can see on the modal that the Dropdown button is showing through it which is another error. Any ideas on what might be causing this?

<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

Try moving the modal div outside of the <table>. This is mentioned in the docs:

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.