Question

尽管阅读了这个post和另一个post，我无法通过控制器操作获得一个模式框显示在rails 5中，当我点击屏幕变灰时（那没关系，但模态框永远不会出现。如果我直接在rails视图中使用bootstrap模态组件，它可以完美地工作。链接触发模态，我尝试了两个显示的链接。

<%= link_to insert_icon + ' UPLOAD PICTURE', new_path, class: 'btn btn-primary' , remote: true, data: { target: '#uploadpic', toggle: 'modal' }%>

<%= link_to insert_icon + ' UPLOAD PICTURE', new_path, class: 'btn btn-primary' , remote: true%>

控制器

def new
@pic = Picture.new
respond_to do |format|
  format.html
  format.js
end

端

存储在views / pictures /

中的new.js.erb文件

$("#modal-window").html("<%= j render 'shared/modal_upload' %>");
$("#modal-window").modal('show');

部分要在shared / _modal_upload.html.erb中呈现

<div class="modal fade" id="uploadpic" tabindex="-1" role="dialog" aria-
labelledby="uploadpicLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Upload vintage 
pictures only!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-
label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= form_for(@pic, url: pictures_path) do |f| %>
        <div class="form-group">
          <%= render 'shared/flash_messages' %>
        </div>
        <div class="form-group">
        <%= f.label :country ,class: "mb-0" %><br />
        <%= f.text_field :country, class: "form-control form-control-sm 
rounded-0"%>
        </div>
        <div class="form-group">
          <%= f.label :city ,class: "mb-0" %><br />
          <%= f.text_field :city, class: "form-control form-control-sm 
rounded-0"%>
        </div>
        <div class="form-group">
          <%= f.label :title ,class: "mb-0" %><br />
          <%= f.text_field :title, class: "form-control form-control-sm 
rounded-0"%>
        </div>
        <div class="form-group">
          <%= f.label :desc ,class: "mb-0" %><br />
          <%= f.text_area :desc, rows: 3, class: "form-control form-control-
sm rounded-0"%>
        </div>
        <div class="custom-file">
              <%= f.file_field :file, class: "custom-file-input", accept: 
'image/jpg,image/gif,image/png, image/jpeg'%>
              <label class="custom-file-label" for="customFile">Choose 
file</label>
        </div>
        <div class="form-group">
          <%= f.submit "Upload Picture", class: "btn  btn-warning rounded-0 
text-center" %>
        </div>
        <% end %>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

最后，在关闭正文标记之后的application.html.erb中。

</body>
  <div id="modal-window">
  </div>
</html>

这是服务器对get请求的响应

Started GET "/new" for 127.0.0.1 at 2018-02-09 19:14:10 -0300
Processing by PicturesController#new as JS
  Rendering pictures/new.js.erb
  Rendered shared/_flash_messages.html.erb (0.2ms)
  Rendered shared/_modal_upload.html.erb (3.0ms)
  Rendered pictures/new.js.erb (4.6ms)
Completed 200 OK in 13ms (Views: 10.5ms | ActiveRecord: 0.0ms)

Rails 5，Bootstrap 4模态框未显示，但窗口显示为灰色

0 个答案: