Rails 5, Bootstrap 4 modal box not showing, but window greyed out

Question

Despite reading this post and this other post, I can't manage to get a modal box showing in rails 5 through the controller action, when I click the screen gets greyed out (and that's ok), but the modal box never appears. If I use the bootstrap modal components directly in a rails view, it works flawlessly. link to trigger the modal, I tried both of the links shown.

<%= 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%>

controller

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

end

new.js.erb file stored in views/pictures/

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

partial to be rendered in 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>

Finally, in application.html.erb after the closing body tag.

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

And this is the server response to the get request

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)