内联确认框JavaScript

内联确认框是JavaScript中的一种交互式组件，它用于确认用户是否要执行某个操作。通常我们会在删除某个行为时使用内联确认框。

内联确认框可以增加用户体验，防止误操作，同时确保用户能够知道这个操作的后果。

实现内联确认框

通常我们会在触发删除操作的按钮上添加内联确认框。下面是一个基本的实现代码：

<button onclick="return confirm('确定要删除吗？')">删除</button>

这个代码将弹出一个确认框，询问用户是否要执行删除操作。如果用户点击确定，则删除操作将继续执行，否则删除操作将被取消。

注意：这里使用的是confirm函数，它返回一个布尔值。用户点击确认框上的确认按钮时，函数返回true，否则函数返回false。

带提示信息的内联确认框

有时候仅仅询问用户是否要执行一个操作是不够的，我们可能还需要向用户提供更多的信息。这时候我们需要自定义内联确认框的提示信息。

下面是一个带提示信息的内联确认框实现代码：

<button onclick="return confirm('确定要删除<b>所有文件</b>吗？')">删除</button>

这里我们使用了HTML标签<b>，以使提示信息的“所有文件”这部分文字加粗。

使用JavaScript实现内联确认框

虽然在HTML中使用confirm函数可以非常方便地实现内联确认框，不过在实际开发中，我们通常会使用JavaScript代码来实现内联确认框，以便能够更灵活地定制内联确认框的样式和行为。

下面是一个使用JavaScript实现内联确认框的代码：

<button id="delete-btn">删除</button>

<script>
  const deleteBtn = document.getElementById('delete-btn');
  deleteBtn.addEventListener('click', function(event) {
    event.preventDefault();

    if (confirm('确定要删除吗？')) {
      // 执行删除操作
    } else {
      // 取消删除操作
    }
  });
</script>

这个代码定义了一个点击delete-btn按钮时的事件监听器。当点击按钮时，它将阻止默认行为，然后显示一个确认框。如果用户点击确认框的确认按钮，则执行删除操作，否则取消删除操作。

这个代码的好处在于它可以非常容易地做到自定义样式和行为。