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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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風のデザインを作成することができます。

解決済

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

IkazoIchikawa
IkazoIchikawa

総合スコア35

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風のデザインを作成することができます。

1回答

0リアクション

0クリップ

1729閲覧

投稿2022/03/29 09:40

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

Bootstrap 4 を使って削除確認ダイアログを実装しようとしておりますが、閉じるボタン(キャンセルボタン)を押しても、モーダル右上の✕ボタンを押してもモーダルが閉じません。モーダル範囲外のグレーになっている部分のクリックによるモーダルを閉じる動作は意図通り動作しています。

モーダルダイアログの右上の✕ボタンのデザインが、Bootstrapの公式ページ のデザインと異なるので、CSS ファイルが正しく読み込まれていないのでしょうか?

イメージ説明

実装は Django で行っており、html ファイルは以下のとおりです。

アドバイスいただけないでしょうか?

  • main\templates\editors\list.html

html

{% extends "base.html" %} {% block title %}編集者の一覧{% endblock title %} {% block content %} <h4 class="mt-4 border-bottom">編集者の一覧</h4> <a href="{% url 'editors:create' %}" class="btn btn-primary btn-sm my-3">追加</a> <table class="table table-striped table-bordered"> <thead> {% for editor in object_list %} <tr> <th scope="col">ID</th> <th scope="col">名前</th> <th scope="col">操作</th> </tr> </thead> <tbody> <tr> <th scope="row">{{ editor.id }}</th> <td>{{ editor.name }}</td> <td> <a href="{% url 'editors:update' editor.id %}" class="btn btn-outline-primary btn-sm">編集</a> <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> </td> </tr> {% endfor %} </tbody> </table> <!-- 削除を確認するモーダルダイアログ --> <!-- https://getbootstrap.jp/docs/4.2/components/modal/ --> <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">削除確認</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p id="delete-confirmation-message"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-primary" id="deletion-submitted">削除</button> </div> </div> </div> </div> {% endblock content %} {% block scripts %} $(document).ready(()=>{ // レコードの削除 $('.delete-btn').on('click', function(){ // 削除ボタンクリック時 $('#delete-confirmation-message').text(this.dataset.delete_confirmation_message); $('#deleteModal').modal('show'); $('#deletion-submitted').off('click'); $('#deletion-submitted').on('click', null, this.dataset.id, function(obj_event){ $('#deleteModal').modal('hide'); $.ajax({ url: '/editors/' + obj_event.data + '/delete', method: 'POST', headers: {'X-CSRFToken': dict_utilities.getValueFromCookie('csrftoken')}, }).done(() =>{ location.reload(); }); }); }); }); {% endblock scripts %}
  • main\templates\base.html

html

{% load i18n static %} <!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %} <html lang="{{ LANGUAGE_CODE|default:"en-us" }}"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> {% block extra_css %}{% endblock %} <title>{% block title %}My books{% endblock %}</title> </head> <body> <div class="container"> {% block content %} {{ content }} {% endblock %} </div> <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script> <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> <script src="{% static 'js/utility.js' %}"></script> <script> {% block scripts %} {{ scripts }} {% endblock %} </script> </body> </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/ となります。

よろしくおねがいします

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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風のデザインを作成することができます。