Django中Modal弹窗无法打开问题求助

你的代码存在几个关键问题，逐个修正即可解决：

1. 模态框ID与按钮目标不匹配 #

按钮的data-target="#myModal"指向的ID不存在，而你的模态框实际ID是exampleModal，需统一两者：

<!-- 修正按钮的data-target -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal window</button>
<!-- 模态框ID保持exampleModal不变 -->
<div class="modal fade" id="exampleModal" role="dialog">

2. Bootstrap 5属性前缀变更 #

Bootstrap 5所有data属性新增了bs-前缀，旧版的data-toggle、data-dismiss需替换为data-bs-toggle、data-bs-dismiss：

• 触发按钮的data-toggle → data-bs-toggle
• 关闭按钮的data-dismiss → data-bs-dismiss

3. 替换过时类名 #

Bootstrap 5已移除btn-default类，改用btn-secondary：

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

4. 调整Bootstrap JS加载位置 #

将Bootstrap的JS脚本从<head>移至<body>末尾，确保DOM加载完成后再执行脚本：

<!-- 在</body>标签前添加 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.2.3/js/bootstrap.min.js"></script>

同时删除<head>中对应的脚本标签。

修正后的完整模板代码 #

{% load static %}
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'main/css/main.css' %}">
    <link rel="stylesheet"  href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
</head>
<body>
    <aside>
        <img src="{% static 'main/img/1.jpg' %}" alt="Logo">
        <span class="logo">Rolex</span>
        <h3>Навигация</h3>
        <ul>
            <a href="{% url 'home' %}"><li><i class="fa-solid fa-house"></i> Главная</li></a>
            <a href="{% url 'about' %}"><li><i class="fa-solid fa-user"></i> Про нас</li></a>
            <a href="{% url 'news_home' %}"><li><i class="fa-solid fa-user"></i> Новости </li></a>
            <a href=""><li><i class="fa-solid fa-book"></i> Контакты</li></a>
            <a href="{% url 'create' %}"><li> <button class = "btn btn-info"> <i class="fa-solid fa-plus"> Добавить запись </i> </button> </li></a>
        </ul>
    </aside>
    <main>
        {% block content %}
        {% endblock %}
    </main>
    <!-- 移至此处加载JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.2.3/js/bootstrap.min.js"></script>
</body>
</html>

修正后的内容块代码 #

{% extends 'main/layout.html' %}

{% block title %} Registration {% endblock %}

{% block content %}

    <div class="features">
        <h1> Registration </h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal window</button>
        <div class="modal fade" id="exampleModal" role = "dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"> Form </h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Something</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <form method = "post">
            {% csrf_token %}
            {{ form.name }}<br>
            {{ form.mail }}<br>
            {{ form.phone }}<br>
            {{ form.password }}<br>
            <font color="red">{{error}}</font><br> <br>
            <button class = "btn btn-success" type = "submit">add news</button>
        </form>
    </div>
{% endblock %}

完成以上修改后，模态框即可正常触发。

内容的提问来源于stack exchange，提问作者Артём Пройдаков