Bootstrap4系でモーダルのポップアップが表示されない

実現したいこと

プルダウンメニューの項目をクリックするとモーダルが表示されるようにしようとしています。
サンプルキットを参考に実装をしてみましたが、背景がグレーアウトするだけでモーダルの画面が表示されません。下記のコードをどのように修正すれば正常に動くか、教えていただけると幸いです。

該当のソースコード

article_detail.html
1<!DOCTYPE html>
2<html lang="en" class="no-js">
3  <head>
4    <title>{% block title %}{% endblock %}</title>
5
6    <!-- Meta -->
7    <meta charset="utf-8"/>
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9    <meta http-equiv="x-ua-compatible" content="ie=edge">
10    <meta name="keywords" content="">
11    <meta name="description" content="">
12    <meta name="author" content="">
13
14    <!-- Favicon -->
15    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
16
17    <!-- Web Fonts -->
18    <link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,600,700" rel="stylesheet">
19
20    <!-- Bootstrap Styles -->
21    <link rel="stylesheet" type="text/css" href="{% static 'vendors/bootstrap/css/bootstrap.css' %}">
22
23    <!-- Components Vendor Styles -->
24    <link rel="stylesheet" type="text/css" href="{% static 'vendors/font-awesome/css/fontawesome-all.min.css' %}">
25    <link rel="stylesheet" type="text/css" href="{% static 'vendors/slick-carousel/slick.css' %}">
26
27    <!-- Theme Styles -->
28    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
29
30    <!-- MDB -->
31    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css" rel="stylesheet">
32
33    <style type="text/css">
34    </style>
35    {% block head %}{% endblock %}
36  </head>
37<body>
38-中略-
39<ul class="navbar-nav">
40 <li class="nav-item dropdown">
41  <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
42   <img class="rounded-circle u-box-shadow-sm mr-2" width="25" height="25" src="{% static 'img/three_dots_icon.png' %}" alt="Icon">
43  </a>
44  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
45   <a class="dropdown-item" data-toggle="modal" href=".bd-example-modal-lg">Edit</a>
46
47  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
48   <div class="modal-dialog modal-lg" role="document">
49    <div class="modal-content">
50     <div class="modal-header">
51      <h5 class="modal-title" id="exampleModalLabel">Large Size</h5>
52       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
53        <span aria-hidden="true">&times;</span>
54       </button>
55      </div>
56      <div class="modal-body">
57           ...
58      </div>
59      <div class="modal-footer">
60       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
61       <button type="button" class="btn btn-primary">Save changes</button>
62      </div>
63     </div>
64    </div>
65   </div>
66  </div>
67 </li>
68</ul>
69
70<!-- JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
71    <!-- Global Vendor -->
72    <script src="{% static 'vendors/jquery.min.js' %}"></script>
73    <script src="{% static 'vendors/jquery.migrate.min.js' %}"></script>
74    <script src="{% static 'vendors/popper.min.js' %}"></script>
75    <script src="{% static 'vendors/bootstrap/js/bootstrap.min.js' %}"></script>
76
77    <!-- Components Vendor  -->
78    <script src="{% static 'vendors/jquery.parallax.js' %}"></script>
79    <script src="{% static 'vendors/typedjs/typed.min.js' %}"></script>
80    <script src="{% static 'vendors/slick-carousel/slick.min.js' %}"></script>
81    <script src="{% static 'vendors/counters/waypoint.min.js' %}"></script>
82    <script src="{% static 'vendors/counters/counterup.min.js' %}"></script>
83
84    <!-- Theme Settings and Calls -->
85    <script src="{% static 'js/global.js' %}"></script>
86
87    <!-- Theme Components and Settings -->
88    <script src="{% static 'js/vendors/parallax.js' %}"></script>
89    <script src="{% static 'js/vendors/carousel.js' %}"></script>
90    <script src="{% static 'js/vendors/counters.js' %}"></script>
91    <!-- END JAVASCRIPTS -->
92
93    <!-- MDB -->
94    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.0.0/mdb.min.js"></script>
95</body>

試したこと

・こちらを参考に下記のコードを<body>タグの一番最後へ追記したところ、プルダウンの作動も無くなってしまいました。

article_detail.html
1<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
3<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

・試しにDjangoのテンプレートタグを用いない静的htmlを最小構成にして試してみたところ、同様の問題が発生しました。
その際、<script>タグ内のjsを上記のコードへ置き換えや追記した場合も同様にプルダウン作動がなくなりました。

・プルダウンを削除し、モーダルのトリガーをシンプルな<a>タグの要素にしてみたところ、モーダルが正常に表示されました。

・動作確認をする上でブラウザのキャッシュクリア等も行いましたが、問題は解決されませんでした。

試したこと(その2)

ブラウザの検証機能のコンソール画面には下記のエラーメッセージが表示されました。

補足情報（FW/ツールのバージョンなど）

・Bootstrap4系
・Django3系
・MacOS
・Chromeブラウザ

m.ts10806

2023/07/04 07:50

>試したこと js読み込み部分を書き換えではなく追記ですか？多重読み込みにより動作しなくなると思います。機能のバッティング。ちなみに、元のコードでブラウザ開発ツールのコンソールにエラー等は出ていませんか？確認して追記願います。念のため、フレームワーク関係ない静的htmlでも確認してみてください。他のjsやcssの読み込みがない最小構成が望ましいです。