Bootstrap 模态未显示在 Django 模板中

问题描述 投票：0回答：2

我花了太多时间来解决这个问题。 有谁知道为什么这个模式不会弹出？

似乎如果我删除表格（占据了大部分代码），模态就可以正常工作。 如果我删除 CSS，模式仍然不起作用。

不要判断它是否可怕，2周前才开始学习Django、HTML等😛

{% extends 'base.html' %}
{% load crispy_forms_tags %}


{% block head %}

    <style>

    .teacher-list {
        margin-left: 200px;
        height: 100%;
        width: 350px;
        position: fixed;
        overflow:hidden; 
        overflow-y:scroll;
        border-right: 1px solid;
        border-color: #d3d3d3;
    }

    .teacher-list-title {
        line-height: 1.3;
        height: 4px;
    }

    .teacher-list-text {
        line-height: 1.3;
        padding-bottom: 0px;
        font-weight: normal;
        height: 4px;
    }

    .teacher-body {
        padding-left: 570px;
        padding-top: 10px;
        text-align: center;
    }

    .icon-only-button {
        background: transparent;
        border: none !important;
        padding: 0 0 0 0;
    }

    .search input {
        padding-left: 10px;
        height: 30px;
        width: 220px;
        border: none;
    }

    .line {
        margin-left: 550px;
        width: 100%;
        border-bottom: 1px solid black;
        position: absolute;
    }

    </style>

{% endblock %}

{% block content %}
    <div class="teacher-list">
        <table class="table">
            <tbody>
                <tr class="search">
                    <form method="GET" name="search">
                        <th scope="row">
                            <input name="search" type="search" placeholder="Search.." value="{{ search_text }}">
                        </th>
                    </form>
                    <td>
                        <button type="button" class="icon-only-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16"><path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/></svg>
                        </button>
                    </td>
                </tr>
                {% for instance in teachers %}
                    <tr>
                        <th scope="row">
                            <p class="teacher-list-title">{{ instance.fullname }}</p>
                            <p class="teacher-list-text">{{ instance.school }}</p>
                        </th>
                        <td>
                            <form method="GET" class="form-group" name="select_teacher">
                                <button class="icon-only-button" type="submit" name="select_teacher" value="{{ instance.pk }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if selected_teacher != "" %}
    <div class="teacher-body">
        <h1>{{ selected_teacher.fullname }}</h1>
        <form method="POST" class="form-group" name="delete_teacher">
            {% csrf_token %}
            <button onclick="return confirm('Are you sure you want to delete {{ selected_teacher.fullname }}?');" class="icon-only-button" type="submit" name="delete_teacher" value="{{ selected_teacher.pk }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>
            </button>
        </form>
    </div>
    <div class="line"></div>
    <div class="teacher-body">
        <form method="POST" class="form-group" name="new_teacher">
            {% csrf_token %}
            {{ form|crispy }}
            <button type="submit" name="new_teacher" class="btn btn-success">Create</button>
        </form>
    </div>
    {% endif %}

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

引导注入：

<!doctype html>
<html lang="en">
<head>
    {% block head %}
    {% endblock %}

    <style type="text/css">

    .content {
        padding-left: 220px;
        padding-top: 10px;
    }

    .btn, btn-success {
        background-color: #3c89d0 !important;
        border-color: #1184e8 !important;
    }

    </style>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    <title>CT Behaviour Management</title>

</head>

<body>

    {% include 'nav.html' %}

    {% block content %}
    {% endblock %}

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>
javascript html css django bootstrap-modal
2个回答
0
投票

如果是 4.0，则在 html 中链接哪个 bootstrap 版本

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

如果是5.0

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

data-bs-dismiss data-bs-toggle data-bs-target 中的两个模态都有字母变化

因此根据您链接的引导版本更改它

0
投票

可能为时已晚，但我也遇到了完全相同的问题。

解决的是，我发现我只引用了编译后的 Bootstrap CSS 库，而不是 JS 库。确保在文件中链接两者（如果您使用 html head 链接方法）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.