jquery删除弹出确认框

jQuery 删除弹出确认框通常是指在使用 jQuery 时，移除或替换掉浏览器默认的确认对话框（如 confirm 方法），转而使用自定义的模态框（modal）或提示框来实现用户确认操作。

基础概念

弹出确认框：在网页上执行某些重要操作前，浏览器会弹出一个对话框询问用户是否确认执行，这是通过 JavaScript 的 confirm 方法实现的。

jQuery：一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

类型与应用场景

模态框（Modal）：覆盖整个页面的弹出窗口，常用于重要操作的确认。
提示框（Tooltip/Popover）：轻量级的信息提示，适用于简单的确认或提示场景。

示例代码

以下是一个使用 jQuery 和 Bootstrap 创建自定义确认模态框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Confirm Box</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmModal">
  Delete Item
</button>

<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Confirm Delete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this item?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="deleteButton">Delete</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $('#deleteButton').click(function(){
        // Perform delete operation here
        alert('Item deleted!');
        $('#confirmModal').modal('hide');
    });
});
</script>

</body>
</html>