我的网站页面上有一个选项卡式导航器。导航器看起来不错，但是在其中一个选项卡中，我有一个表，该表的每行上都有一个“标记完成”按钮。每个按钮打开一个模式。
当我将表格放在选项卡式导航器之外的地方时，该按钮可以正常工作，并且显示模式时也没有任何问题。现在，当我尝试打开模式时，它似乎没有焦点，无法单击。我也没有办法退出它。
您可以在模式上看到下拉按钮正在显示，这是另一个错误。关于什么可能导致此的任何想法？
<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">×</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>
最佳答案
尝试将模式div移到<table>之外。在文档中提到了这一点：
Modal markup placement
始终尝试将模式的HTML代码放在文档的顶级位置，以避免其他组件影响模式的外观和/或功能。