确认删除 - CSS

当用户在网页上执行删除操作时，常常需要进行二次确认以避免误操作。在此情况下，我们通常需要使用 CSS 来创建一个类似于弹窗的确认删除框。

1. HTML 结构

确认删除框的 HTML 结构通常包括遮罩层、确认内容区域和确认操作按钮。以下是基本的 HTML 结构：

<div class="confirm-mask">
  <div class="confirm-content">
    <h2>确认删除？</h2>
    <p>你确定要删除此项内容吗？删除后将无法恢复。</p>
    <div class="confirm-btns">
      <button class="confirm-ok">确定</button>
      <button class="confirm-cancel">取消</button>
    </div>
  </div>
</div>

在这个结构中，.confirm-mask 表示遮罩层，.confirm-content 表示确认内容区域（包括确认标题、确认内容和确认操作按钮），.confirm-ok 和 .confirm-cancel 分别表示确认和取消按钮。

2. CSS 样式

通过 CSS 样式，我们可以让确认删除框具有更好的视觉效果。以下是可能需要的样式：

.confirm-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.confirm-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 24px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.confirm-content h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.confirm-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 24px;
}

.confirm-btns {
  text-align: right;
}

.confirm-btns button {
  margin-left: 12px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-ok {
  background-color: #0bb243;
  color: #fff;
}

.confirm-cancel {
  background-color: #eaeaea;
  color: #444;
}

在这个示例中，.confirm-mask 的样式使其占据整个窗口并且半透明，形成了一个遮罩层。.confirm-content 的样式使其位于中央，并具有较大的水平空间。.confirm-ok 和 .confirm-cancel 分别具有不同的背景颜色和样式。

3. JavaScript 交互

通过 JavaScript 交互，我们可以让确认删除框实际执行某些操作。以下是基本的 JavaScript 代码：

const confirmMask = document.querySelector('.confirm-mask');
const confirmOk = document.querySelector('.confirm-ok');
const confirmCancel = document.querySelector('.confirm-cancel');

confirmOk.addEventListener('click', function() {
  // 执行删除操作
  confirmMask.style.display = 'none';
});

confirmCancel.addEventListener('click', function() {
  confirmMask.style.display = 'none';
});

// 显示确认框的代码
confirmMask.style.display = 'block';

在这个示例中，我们使用 document.querySelector 方法获取确认删除框中的 .confirm-mask、.confirm-ok 和 .confirm-cancel 元素，并绑定 click 事件。当用户单击确认按钮时，执行删除操作（这里只是一个示例，实际上需要执行具体的操作），并将确认删除框隐藏起来。当用户单击取消按钮时，只是将确认删除框隐藏起来而不执行任何操作。

4. 总结

在确认删除框中，CSS 可以让框具有更好的视觉效果，而 JavaScript 交互则可以让框实际执行某些操作。在实际开发中，根据具体业务场景可能需要进行适当的修改和扩展。