引导模式未正确弹出答案

【问题标题】：bootstrap modal not properly popped out引导模式未正确弹出
【发布时间】：2019-02-25 10:07:58
【问题描述】：

我正在尝试在 ruby on rails 上显示模式。我设置了一个 view 按钮，所以只要单击它，模式就会弹出。但它没有正常工作。正如您在image 上看到的那样，模态不应变暗。因此，我无法单击任何内容。这是我的代码：

index.html.erb

            <tbody>
              <% @quotations.each do |quotation| %>
                <tr>
                  <td><%= quotation.customer.name %></td>
                  <td><%= quotation.build_quotation_number %></td>
                  <td><%= quotation.reference_no %></td>
                  <td align="center"><%= quotation.customer.tin %> . 
 </td>
                  <td align="center">
                    <% if current_administrator.admin? || quotation.created_by_id == current_administrator.id %>
                      <%= link_to ('<i class="ti-pencil-alt"> </i>').html_safe, edit_quotation_path(quotation), class: "btn btn-icon btn-fill btn-github", title: "Edit Quotation " + quotation.build_quotation_number, 'data-toggle' => 'tooltip', 'data-placement' => 'top' %>
                    <% end %>

                   <button type="button" class="btn btn-icon btn-fill btn-linkedin" title="View Quotation" data-toggle="modal" data-target="#view_quotation_modal"><i class="ti-eye"> </i></button>

                    <% if current_administrator.admin? || quotation.created_by_id == current_administrator.id %>
                      <%= link_to ('<i class="ti-trash"> </i>').html_safe, quotation_path(quotation), data: {:confirm => 'Are you sure you want to delete this quotation?'}, method: :delete, class: "btn btn-icon btn-fill btn-danger", title: "Delete Quotation " + quotation.build_quotation_number, 'data-toggle' => 'tooltip', 'data-placement' => 'top' %>

                      +
                    <% end %>
                     <%= render partial: 'quotations/modal/view_quotation_modal', locals: { quotation: @quotation } %>
                  </td>
                </tr>
              <% end %>

            </tbody>

_view_quotation_modal.html.erb

<!-- Modal -->
<div class="modal fade" id="view_quotation_modal" role="dialog">
 <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Quotation</h4>
   </div>
   <div class="modal-body">

    <div class="form-group">
                    <div class="col-md-8">
                      <b>Customer</b>

  </div>  
     <div class="modal-footer">  
      <div class="form-group" style="padding-top: 10px;">
        <span style="padding-left: 460px;"><button type="button" class="btn btn-danger" data-dismiss="modal">Close</button></span>
      </div>
     </div>  
  </div>
 </div>
</div>
</div>

【问题讨论】：

标签： css ruby-on-rails bootstrap-4 bootstrap-modal

【解决方案1】：

你做错了。如您所见，您正在循环加载模态的部分，因此 view_quotation_modal 将有 n 个部分。

引导模式应该始终处于代码其余部分之外的模式，一直到最底部。

在你的主布局文件中添加下面的 div，比如在 application.html.erb 中

<div id="modal-window" class="modal fade" role="dialog" data-backdrop="static"></div>

你可以做得更好，如下所示，添加单独的动作，显示模态。

<button type="button" class="btn btn-icon btn-fill btn-linkedin" title="View Quotation" data-toggle="modal" data-target="#view_quotation_modal"><i class="ti-eye"> </i></button>

点击上面的按钮后，您可以对 rails 控制器进行 ajax 调用，或者您只需使用 link_to 代替 button 即可调用 rails 控制器的操作并传递所需的参数。

在轨道控制器中。

def show_quotation
  # do your logic 
  respond_to do |format|
    format.html
    format.js 
   end
end

show_quotation.js.erb

$("#modal-window").html("<%= escape_javascript(render 'view_quotation_modal') %>");
$("#modal-window").modal();

您可以部分访问所有实例变量。

【讨论】：