如何为现有删除按钮添加Bootstrap确认弹窗？

要实现点击删除按钮先弹出确认框，确认后再执行删除操作，只需完成以下三个关键修改：

1. 修改删除按钮代码 #

将原本直接跳转的链接替换为触发弹窗的按钮，同时通过自定义属性存储对应帖子的删除URL：

{% if user.is_authenticated %}
<button class="btn btn-danger btn-small delete-btn" data-delete-url="{% url 'delete' post.id %}">
  Delete <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 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 3h11V2h-11v1Z"/>
  </svg>
</button>
{% endif %}

2. 整合弹窗到帖子页面 #

将弹窗代码（仅保留核心modal部分）添加到帖子页面的底部（</body>标签前即可）：

<!-- 删除确认弹窗 -->
<div id="deleteModal" class="modal fade">
  <div class="modal-dialog modal-confirm">
    <div class="modal-content">
      <div class="modal-header">
        <div class="icon-box">
          <i class="material-icons">&#xE5CD;</i>
        </div>
        <h4 class="modal-title">确定要删除吗？</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <p>你确定要删除这篇帖子吗？此操作无法撤销。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger confirm-delete">删除</button>
      </div>
    </div>
  </div>
</div>

3. 添加JavaScript处理逻辑 #

在页面底部添加JS代码，实现弹窗触发和确认后的跳转逻辑：

$(document).ready(function() {
  let deleteUrl = '';

  // 点击删除按钮时记录URL并打开弹窗
  $('.delete-btn').click(function() {
    deleteUrl = $(this).data('delete-url');
    $('#deleteModal').modal('show');
  });

  // 确认删除后跳转到删除URL
  $('.confirm-delete').click(function() {
    window.location.href = deleteUrl;
    $('#deleteModal').modal('hide');
  });
});

注意：确保页面已经引入了jQuery和Bootstrap的JS文件（与弹窗代码中依赖的版本一致），避免重复引入。

内容的提问来源于stack exchange，提问作者Ariky Hito