質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

6111閲覧

【Bootstrap】モーダルが閉じるボタンで閉じない

IkazoIchikawa

総合スコア38

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2022/03/29 09:40

モーダルの閉じるボタンまたは右上✕ボタンを押しても、モーダルが閉じない

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">&times;</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/ となります。

よろしくおねがいします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

5 からは jQuery に依存しないコードになったはずです。
古いドキュメントを読んでいませんか?

JavaScript 1行でモーダルを作成します。
Modal (モーダル) · Bootstrap v5.0

投稿2022/03/29 09:51

Lhankor_Mhy

総合スコア36261

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

IkazoIchikawa

2022/03/29 10:18

回答ありがとうございます。そうだったんですね。 使用する Bootstrap を 4.6.1 に変更したら、意図通りボタンでモーダルを消すことができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問