引导模态未正确弹出 [英] bootstrap modal not properly popped out

问题描述

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

I'm trying to display a modal on ruby on rails. I set a view button so whenever it clicked, the modal will pop out. But it didn't worked properly. As you can see on the image the modal shouldn't be darken. Because of this, I cannot click anything on it. Here's my code:

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

_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>

推荐答案

您这样做的方式有误.如您所见，您正在循环中加载模态的部分，因此view_quotation_modal将有n个部分.

You are doing it in wrong way. as you can see you are loading partial of modal in loop so there will n number of partials will be there for view_quotation_modal.

引导程序模式应始终在代码其余部分之外，一直到最底部.

The bootstrap modal should always modal outside of the rest of your code, to the very bottom.

在div以下将其添加到主布局文件中，例如application.html.erb

Add this below div in your main layout file like in application.html.erb

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

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

You can do it in better as shown below, add separate action which will show modal.

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

On click of above button, you can make ajax call to rails controller, or you simply use link_to instead of button which will call action of rails controller with passing needed parameters.

在Rails控制器中.

in rails controller.

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

show_quotation.js.erb

show_quotation.js.erb

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

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

You can access all instance variables in partial.

这篇关于引导模态未正确弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！