実現したいこと
プルダウンメニューの項目をクリックするとモーダルが表示されるようにしようとしています。
サンプルキットを参考に実装をしてみましたが、背景がグレーアウトするだけでモーダルの画面が表示されません。下記のコードをどのように修正すれば正常に動くか、教えていただけると幸いです。
該当のソースコード
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">×</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>
また動作確認をする上でブラウザのキャッシュクリア等も行いましたが、問題は解決されませんでした。
補足情報（FW/ツールのバージョンなど）
・Bootstrap4系
・Django3系
・MacOS
・Chromeブラウザ
0 コメント