JavaScript 确认是否

在 Web 开发中，确认是否执行操作是非常重要的。比如在删除一些重要数据或执行一些危险操作之前，需要提示用户确认是否继续操作。

JavaScript 提供了几种方式来实现确认操作，包括浏览器默认的确认对话框、自定义对话框等。

浏览器默认的确认对话框的使用

浏览器默认的确认对话框使用起来非常简单，只需要调用 confirm() 函数即可。

if (confirm('确定要删除吗？')) {
  // 用户点击了确认按钮
  console.log('执行删除操作');
} else {
  // 用户点击了取消按钮
  console.log('取消删除操作');
}

上面的代码会弹出一个确认对话框，询问用户是否确定要删除。如果用户点击了确认按钮，就会执行删除操作，否则不执行任何操作。

自定义对话框的使用

除了使用默认的确认对话框，我们还可以通过自定义对话框来实现确认操作。

比如我们可以使用 Bootstrap 模态框来实现一个自定义的确认对话框。

<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

<!-- HTML 代码 -->
<button id="delete-btn" class="btn btn-danger">删除</button>

<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<!-- JavaScript 代码 -->
<script>
$('#delete-btn').click(function() {
  $('#confirm-dialog').modal('show');
});

$('#confirm-btn').click(function() {
  // 执行删除操作
});

$('#cancel-btn').click(function() {
  $('#confirm-dialog').modal('hide');
});
</script>

<!-- 模态框 -->
<div class="modal fade" id="confirm-dialog" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="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">
        确定要删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="confirm-btn">确定</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancel-btn">取消</button>
      </div>
    </div>
  </div>
</div>

上面的代码会在点击删除按钮时，弹出一个自定义的确认对话框，询问用户是否确定要删除。如果用户点击了确定按钮，则会执行删除操作，否则不执行任何操作。

需要注意的是，自定义对话框的使用需要引入相关的 CSS 和 JS 文件，并且需要使用 jQuery 和 Bootstrap 框架。

总结

JavaScript 提供了浏览器默认的确认对话框和自定义对话框两种方式来实现确认操作。开发者可以根据具体需求来选择使用哪种方式。如果只是简单的确认操作，可以使用浏览器默认的确认对话框，而如果需要定制化的效果，可以使用自定义对话框。