Question

我正在尝试在轨道上的红宝石上显示模式。我设置了一个视图按钮，因此每当单击该按钮时，都会弹出该模式。但是它不能正常工作。如您在this上所见，模式不应变暗。因此，我无法在其上单击任何内容。这是我的代码：

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>

Answer 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控制器的动作。

在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();

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

引导模态未正确弹出

1 个答案: