Bootstrap4でモーダルウインドウを表示させたいのですが、
ウインドウが前面に表示されず、閉じることもできなくなってしまいます。

###問題が起きているページの状態
「フォロー」部分をクリックするとモーダルでフォローしている人のリストを表示させたいです。
ウインドウは開くもの前面に表示されず、閉じることもできなくなってしまいます。

同じページでもう一つモーダルで表示させる部分があるのですが、それは正常に動作します。
CDジャケット画像をクリックすると情報をモーダルで表示する部分です

ソースコード

###問題が起きている部分のソースコード
ヘッダー部分の記述

html
1<header class="site-header flex">
2  <ul class="list-inline">
3    <li class="list-inline-item">
4      <% if @user.originalimage? %>
5        <img src= <%= @user.originalimage %> class="icon">
6      <%elsif @user.image? %>
7        <img src= <%= @user.image %> class="icon">
8      <% else %>
9        <%= image_tag('/assets/nonicon.png' ,class: 'icon') %>
10      <% end %>
11    </li>
12    <li class="list-inline-item"><h3><%= @user.username %></h3></li>
13    <li class="list-inline-item"><h2><%= @user.profile %></h2></li>
14    <li class="list-inline-item">
15<!--モーダルのリンク部分 -->
16    <%= @user.follow_count %>
17    <%= link_to "フォロー", {controller: :users, action: :follow_list, user_id: @user.id},
18     remote: true, class: "modal-open" %>
19    <div id="following-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
20    </li>
21<!--モーダルのリンク部分 -->
22    <li class="list-inline-item">
23    <%= @user.followers_count %>
24
25    <%= link_to "フォロワー", {controller: :users,action: :follower_list, user_id: @user.id}, remote: true, class: "modal-open",
26    method: :get %></li>
27    <li class="list-inline-item"><%= pluralize(@user.microposts.count, "record") %></li>
28    <%# if current_user.id != @user.id %>
29      <%= render 'users/follow_form' %>
30    <%# end %>
31</header>

「follow_list.js.erb」部分

javascript
1$("#following-modal").html("<%= escape_javascript(render 'users/follow_list') %>");
2$("#following-modal").modal("show");
3

「header.js」スクロールするとヘッダー部分が消えるようにしている

javascript
1var startPos = 0, winScrollTop = 0;
2$(window).on('scroll', function () {
3  winScrollTop = $(this).scrollTop();
4  if (winScrollTop >= startPos) {
5    if (winScrollTop >= 200) {
6      $('.site-header').addClass('hide');
7    }
8  } else {
9    $('.site-header').removeClass('hide');
10  }
11  startPos = winScrollTop;
12});
13

モーダルウインドウの中身部分「users/_follow_list.html.erb」

html
1<div class="modal-dialog">
2  <div class="modal-content">
3<% @user.all_following.each do |user| %>
4  <%= user.username %>
5  <%= link_to '詳細', user_path(user) %>
6<% end %>
7  </div>
8</div>

検証画面。
z-indexやpositionを外したりするとモーダルウインドウが残って黒背景自体が消え、そのままモーダルウインドウ外をクリックすると消すことができましたが、黒背景は残したいです...

css
1.modal-backdrop {
2    position: fixed;
3    top: 0;
4    right: 0;
5    bottom: 0;
6    left: 0;
7    z-index: 1040; 
8    background-color: #000;
9}

.modal-backdropのCSS

.modalのCSS

###正常に動く部分のソースコード

html
1<li class="list-inline-item micropost" id = "micropost-<%= micropost.id %>">
2    <ul class="list-inline">
3<!--モーダルへのリンク部分 -->
4    <li class="list-inline-item">
5    <%= link_to micropost_path(micropost.id), remote: true, class: "modal-open" do%>
6      <img src=<%= micropost.artworkimg %> class="artwork">
7    <% end %>
8    <div id="micropost-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
9    </li>
10<!-- モーダルへのリンク部分 -->
11    <li class="list-inline-item">
12    <p class="content"><%= micropost.content %></p>
13    </li>
14    </ul>
15</li>

「show.js.erb」

javascript
1$("#micropost-modal").html("<%= escape_javascript(render 'microposts/show') %>");
2$("#micropost-modal").modal("show");

「_show.html.erb」モーダルの中身部分

html
1<div class="modal-dialog modal-dialog-centered ">
2  <div class="modal-content">
3   <ul class="list-inline">
4    <li class="list-inline-item">
5    <img src=<%= @micropost.artworkimg %> class="artwork">
6    </li>
7    <li class="list-inline-item">
8    <h2><%= @micropost.artistname %></h2>
9    <h3><%= @micropost.albumtitle %></h3>
10    <h2><%= @micropost.content %></h2>
11    </li>
12    </ul>
13  </div>
14</div>

正常に動くページの検証画面
.modal-backtdropのCSS

.modalのCSS

考えられる理由

先に正常に表示できている部分（画像クリックで開く機能）の実装をし、そこで使ったコードをほぼ流用してフォローリストのモーダル部分を作ったため、先に作ったやつが何らか邪魔をしているのかな・・・と思います。
jsの読み込みがうまくできていなかったりすることも原因でしょうか、、、

どなたか教えていただけると幸いです。

コンソールにたまっているエラーについて（回答者さんへの追加情報）
確認したところ、上1つは別のページで起こるエラー、GETのエラーは常に出てしまうもので未解決、
最後の2つは上部メニューをスクロールした時に消えるように設定しているのですが、そのエラーのようです。

★2019/5/30追記
上記エラーは解消しましたが、以前として表示されません。
Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題
こちらの記事も参照しましたが、z-indexの大小を正しく設定しても解消されず。。。
モーダル　bootstrap4移行ガイドに書いてある「Bootstrapは一度に1つのモーダルウィンドウしかサポートしない。入れ子になったモーダルは、ユーザー経験が乏しいと思われるためサポートされていない。」から察するに、今回入れ子構造にはしていないもののそれが関係しているのかなと考えています...