Django引导程序模式未显示

Question

我试图在单击按钮时显示模态，但是，在单击模态后，它不显示模态，我不知道这是什么问题，因为我遵循了有关bootstrap和W3Schools的确切教程。这是我的模板：

     {% for comment in comments %}
      <div class="border-bottom">
        <div class="row pt-1 pl-4">
          <div class="col-xs">
            <img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
          </div>
          <div class="col-xs" style="margin-bottom: 0;">
            <span class="text-dark font-size-smaller" href="#" style="font-weight: 500;">{{ comment.name.first_name }}</span>
            <span class="text-muted small">•</span>
            <a class="text-muted small" href="#">@{{ comment.name.username }}</a>
            <span class="text-muted small">•</span>
            <span class="text-muted small">{{ comment.get_created_on }}</span>
            <p class="font-weight-light pl-1">{{ comment.body }}</p>
          </div>
        </div>
        <div class="d-flex justify-content-between">
          <div>
            <span class="text-muted small view-replies">view {{ comment.replies.count }} replies <i class="fas fa-caret-down"></i></span>
          </div>
          <div>
<!-- button to show modal -->
            <button class="btn btn-sm small float-right text-muted button-outline-light reply-btn" type="button" data-toggle="modal" data-target="modal-comment-reply">Reply</button>
          </div>
        </div>
        <div class="comment-replies">
          {% for reply in comment.replies.all %}
          <div class="row pt-1 pl-4">
            <div class="col-xs">
              <img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
            </div>
            <div class="col-xs" style="margin-bottom: 0;">
              <span class="text-dark font-size-smaller" href="#" style="font-weight: 500;">{{ comment.name.first_name }}</span>
              <span class="text-muted small">•</span>
              <a class="text-muted small" href="#">@{{ comment.name.username }}</a>
              <span class="text-muted small">•</span>
              <span class="text-muted small">{{ comment.get_created_on }}</span>
              <p class="font-weight-light pl-1">{{ comment.body }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="modal fade" id="modal-comment-reply">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <p class="font-size-smaller">{{ request.user.first_name }} replying to {{ comment.name.username }}</p>
            </div>
            <div class="modal-body">
              <form method="POST" action="{% url 'home:post-detail' post.guid_url %}" class="post-comment-form" style="height: 1rem;">
                {% csrf_token %}
                <input type="hidden" name="comment_id" value="{{ comment.id }}"/>
                {{ form  }}
                <button class="btn btn-sm small btn-outline-primary ml-1" style="border-radius: 20px;" type="submit">Reply</button>
                <button type="button btn-sm small btn-outline-secondary" class="btn btn-secondary" data-dismiss="modal">Close</button>  
              </form>
            </div>
          </div>
        </div>
      </div>
        {% empty %}
        <div class="d-flex justify-content-center">
          <p class="font-weight-lighter text-muted">No comments to show</p>
        </div>
    {% endfor %}
    <style>
      .view-replies:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    </style>
    <script>
    $(document).ready(function () {
        $('.reply-btn').on("click", function () {
            $('#modal-comment-reply').modal("show");
        });
    })
    </script>

我什至尝试用jQuery打开它，但它似乎没有打开，我的其他模态工作正常，我不知道为什么它不能打开。 感谢您提前提供的所有帮助！

编辑：已解决-jquesry函数中的错字！