бутстрап модальный не правильно выскочил - PullRequest
Новая
       7

бутстрап модальный не правильно выскочил

0 голосов
/ 21 сентября 2018

Я пытаюсь вывести модал на ruby ​​на рельсах.Я установил кнопку view , чтобы при щелчке по ней появлялся модал.Но это не сработало должным образом.Как вы можете видеть на изображении , модал не должен быть затемненным.Из-за этого я не могу ничего нажать на него.Вот мой код:

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 Ответ

0 голосов
/ 21 сентября 2018

Вы делаете это неправильно.как вы можете видеть, вы загружаете частичку модального цикла, поэтому для 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>

Нажав вышеуказанную кнопку, вы можете сделать ajax вызов контроллера rails, или выпросто используйте link_to вместо кнопки, которая вызовет действие контроллера 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();

Вы можете получить доступ ко всем переменным экземпляра в частичном.

...