如何在Bootstrap 4中使用模式删除记录

Question

一旦用户单击删除按钮（其中模态包含对删除过程的确认），就会出现模态。

会发生什么：

一旦用户单击“删除”，系统将带他到新页面并显示模式的内容；如果用户单击“是”按钮，则系统将删除记录并将其重定向到列表页面。

我想要什么：

一旦用户单击删除按钮，模态必须出现，询问用户是否要删除。当他单击“是”按钮时，系统必须删除该记录并将其重定向到列表页面。

views.py

def delete(request,pk):
    dbEntry = get_object_or_404(suspect,pk=pk)
    if request.method =="POST":
        dbEntry.delete()
        return redirect("list")
    return render(request,"blog/delete.html",{"dbEntry":dbEntry})

list.html

{% extends "testbootstarp.html" %}

    <a href="{% url 'delete' obj.pk %}" data-target="#modal-suspect" class="btn btn-danger">delete</a>

                            <script type="text/javascript">
                                $(document).ready(function(){
                                    $('#modal-suspect').modal();
                                });

                            </script>

delete.html

<div class="modal fade" id="modal-suspect">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="{% url 'delete' dbEntry.pk %}" class="delete-form">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" >Delete Suspect</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 class="lead"> Are you sure you want to delete this suspect <strong>{{suspect.suspect_name}}</strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">yes</button>
                </div>
            </form>
        </div>
    </div>
</div>