在 JavaScript 中创建可定制的警报

在 JavaScript 中，可以通过 alert() 函数来创建简单的消息框警报。但在实际开发中，我们可能需要创建一些更灵活、可定制的警报，以增强用户体验和提高应用的交互性。本文将介绍如何在 JavaScript 中创建可定制的警报。

系统警报与自定义警报

系统警报是浏览器自带的警报，可以弹出一个简单的消息窗口，其中包含一条文本信息和一个“确定”按钮。系统警报的创建非常简单，只需要调用 alert() 函数并传递一条消息即可：

alert('这是一条系统警报！');

这条代码将在浏览器中弹出一个消息框，并显示文本“这是一条系统警报！”，用户需要点击“确定”按钮才能关闭消息框。

与系统警报不同，自定义警报可以定制警报的外观、内容以及交互方式，从而更好地满足应用的需求。下面是一个简单的自定义警报的示例：

function showAlert(title, message, callback) {
  const modal = document.createElement('div');
  modal.classList.add('alert-modal');

  const modalTitle = document.createElement('h2');
  modalTitle.textContent = title;
  modal.appendChild(modalTitle);

  const modalMessage = document.createElement('p');
  modalMessage.textContent = message;
  modal.appendChild(modalMessage);

  const modalButton = document.createElement('button');
  modalButton.textContent = '确定';
  modalButton.addEventListener('click', () => {
    modal.remove();
    callback && callback();
  });
  modal.appendChild(modalButton);

  document.body.appendChild(modal);
}

这段代码定义了一个名为 showAlert 的函数，可以传递三个参数：标题、内容和回调函数。该函数会创建一个名为 modal 的 div 元素，并将标题、内容和“确定”按钮添加到此元素中。最后，将 modal 元素添加到 document.body 中，即可弹出自定义的警报。

定制警报样式

创建自定义警报时，可以通过 CSS 样式表来定制警报的外观，例如修改警报的背景色、边框、字体、大小等等。警报样式的定制会受到浏览器兼容性的影响，因此建议使用现代 CSS 样式技术来实现定制化样式，例如 flexbox、grid、box-shadow 等。

.alert-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.alert-modal h2 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 0;
}

.alert-modal p {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.alert-modal button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.alert-modal button:hover {
  background-color: #0069d9;
}

Demo

下面是一个完整的自定义警报示例，可以通过调用 showAlert 函数来弹出自定义警报：

// 定义 showAlert 函数
function showAlert(title, message, callback) {
  const modal = document.createElement('div');
  modal.classList.add('alert-modal');

  const modalTitle = document.createElement('h2');
  modalTitle.textContent = title;
  modal.appendChild(modalTitle);

  const modalMessage = document.createElement('p');
  modalMessage.textContent = message;
  modal.appendChild(modalMessage);

  const modalButton = document.createElement('button');
  modalButton.textContent = '确定';
  modalButton.addEventListener('click', () => {
    modal.remove(); // 关闭警报窗口
    callback && callback(); // 执行回调函数
  });
  modal.appendChild(modalButton);

  document.body.appendChild(modal); // 将警报窗口添加到文档中
}

// 调用 showAlert 函数
showAlert('提示', '你确定要删除该项数据吗？', () => {
  console.log('数据已删除！');
});

该示例会创建一个标题为“提示”、内容为“你确定要删除该项数据吗？”的警报，并显示一个“确定”按钮。当用户点击“确定”按钮时，警报窗口将关闭并执行回调函数。