モーダルの閉じるボタンまたは右上✕ボタンを押しても、モーダルが閉じない
Bootstrap 4 を使って削除確認ダイアログを実装しようとしておりますが、閉じるボタン(キャンセルボタン)を押しても、モーダル右上の✕ボタンを押してもモーダルが閉じません。モーダル範囲外のグレーになっている部分のクリックによるモーダルを閉じる動作は意図通り動作しています。
モーダルダイアログの右上の✕ボタンのデザインが、Bootstrapの公式ページ のデザインと異なるので、CSS ファイルが正しく読み込まれていないのでしょうか?
実装は Django で行っており、html ファイルは以下のとおりです。
アドバイスいただけないでしょうか?
- main\templates\editors\list.html
html
1 2{% extends "base.html" %} 3 4{% block title %}編集者の一覧{% endblock title %} 5 6{% block content %} 7 <h4 class="mt-4 border-bottom">編集者の一覧</h4> 8 <a href="{% url 'editors:create' %}" class="btn btn-primary btn-sm my-3">追加</a> 9 <table class="table table-striped table-bordered"> 10 <thead> 11 {% for editor in object_list %} 12 <tr> 13 <th scope="col">ID</th> 14 <th scope="col">名前</th> 15 <th scope="col">操作</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr> 20 <th scope="row">{{ editor.id }}</th> 21 <td>{{ editor.name }}</td> 22 <td> 23 <a href="{% url 'editors:update' editor.id %}" class="btn btn-outline-primary btn-sm">編集</a> 24 <a href="javascript:void(0)" data-id="{{ editor.id }}" data-delete_confirmation_message="編集者 {{ editor.name }} を削除しますか?" class="btn btn-outline-primary btn-sm delete-btn">削除</a> 25 </td> 26 </tr> 27 {% endfor %} 28 </tbody> 29 </table> 30 31 <!-- 削除を確認するモーダルダイアログ --> 32 <!-- https://getbootstrap.jp/docs/4.2/components/modal/ --> 33 <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"> 34 <div class="modal-dialog" role="document"> 35 <div class="modal-content"> 36 <div class="modal-header"> 37 <h5 class="modal-title">削除確認</h5> 38 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 39 <span aria-hidden="true">×</span> 40 </button> 41 </div> 42 <div class="modal-body"> 43 <p id="delete-confirmation-message"></p> 44 </div> 45 <div class="modal-footer"> 46 <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> 47 <button type="button" class="btn btn-primary" id="deletion-submitted">削除</button> 48 </div> 49 </div> 50 </div> 51 </div> 52{% endblock content %} 53{% block scripts %} 54$(document).ready(()=>{ 55 56 // レコードの削除 57 $('.delete-btn').on('click', function(){ // 削除ボタンクリック時 58 59 $('#delete-confirmation-message').text(this.dataset.delete_confirmation_message); 60 $('#deleteModal').modal('show'); 61 $('#deletion-submitted').off('click'); 62 $('#deletion-submitted').on('click', null, this.dataset.id, function(obj_event){ 63 $('#deleteModal').modal('hide'); 64 $.ajax({ 65 url: '/editors/' + obj_event.data + '/delete', 66 method: 'POST', 67 headers: {'X-CSRFToken': dict_utilities.getValueFromCookie('csrftoken')}, 68 }).done(() =>{ 69 location.reload(); 70 }); 71 72 }); 73 }); 74}); 75{% endblock scripts %} 76
- main\templates\base.html
html
1{% load i18n static %} 2<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %} 3<html lang="{{ LANGUAGE_CODE|default:"en-us" }}"> 4<head> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> 8{% block extra_css %}{% endblock %} 9<title>{% block title %}My books{% endblock %}</title> 10</head> 11<body> 12 <div class="container"> 13 {% block content %} 14 {{ content }} 15 {% endblock %} 16 </div> 17<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script> 18<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> 19<script src="{% static 'js/utility.js' %}"></script> 20<script> 21{% block scripts %} 22 {{ scripts }} 23{% endblock %} 24</script> 25</body> 26</html>
実行環境
- OS
Windows 10, Mac OS Big Sur 両方で確認 - Python パッケージ
(pyvenv) C:\Users\***\Desktop\q\main>pip list Package Version -------------------- ------- asgiref 3.5.0 backports.zoneinfo 0.2.1 beautifulsoup4 4.10.0 Django 4.0.3 django-bootstrap4 22.1 django-widget-tweaks 1.4.12 pip 22.0.4 setuptools 60.9.3 soupsieve 2.3.1 sqlparse 0.4.2 tzdata 2022.1 wheel 0.37.1
環境一式を GitHub に保存しました。
https://github.com/ikazoichikawa/q4
事象が確認できるページは http://127.0.0.1:8000/editors/
となります。
よろしくおねがいします

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/03/29 10:18