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

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

回答1:

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.

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>

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.

in rails controller.

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

You can access all instance variables in partial.