jQuery 自定义警告框和确认框

在本文中，我们将介绍如何使用 jQuery 创建自定义的警告框（alert box）和确认框（confirm box）。

警告框（Alert Box）

警告框通常用于显示一条警告消息给用户。它可以用于提示用户输入错误、Confirm 操作等。

创建警告框

可以使用 jQuery 的 append() 方法将一个警告框添加到页面中。首先，我们需要创建一个包含警告框内容的 HTML 元素。以下是一个简单的警告框的示例：

<div class="alert-box">
  <p>This is an alert message!</p>
  <button class="close-btn">Close</button>
</div>

然后，我们可以使用以下代码将警告框添加到页面中：

$('body').append($('.alert-box'));

显示和关闭警告框

警告框需要能够在需要时显示和关闭。我们可以使用 jQuery 的 show() 和 hide() 方法来实现这一功能。

下面的示例演示了如何在点击按钮时显示和关闭警告框：

$('.close-btn').click(function() {
  $('.alert-box').hide();
});

$('.show-alert-btn').click(function() {
  $('.alert-box').show();
});

自定义警告框样式

我们可以使用 CSS 来自定义警告框的样式。例如，可以对警告框添加背景颜色、边框样式等。

以下是一个自定义警告框的示例：

.alert-box {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  margin-bottom: 10px;
}

确认框（Confirm Box）

确认框通常用于询问用户是否确认某个操作。它可以用于删除确认、提交表单确认等。

创建确认框

确认框类似于警告框，只是在 HTML 结构中稍有差异。以下是一个简单的确认框的示例：

<div class="confirm-box">
  <p>Are you sure you want to delete this item?</p>
  <button class="yes-btn">Yes</button>
  <button class="no-btn">No</button>
</div>

同样地，我们可以使用 append() 方法将确认框添加到页面中：

$('body').append($('.confirm-box'));

处理用户选择

确认框需要根据用户的选择来执行不同的操作。我们可以使用 jQuery 的事件处理程序来处理用户选择。

以下示例演示了如何根据用户点击 “Yes” 或 “No” 按钮来执行不同的操作：

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

$('.no-btn').click(function() {
  // 取消删除操作
  $('.confirm-box').hide();
});

自定义确认框样式

同样地，我们可以使用 CSS 来自定义确认框的样式。例如，可以更改按钮的颜色和字体样式。

以下是一个自定义确认框的示例：

.confirm-box {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 10px;
  margin-bottom: 10px;
}

.yes-btn {
  background-color: #155724;
  color: #fff;
  border: none;
  padding: 5px 10px;
  margin-right: 10px;
}

.no-btn {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 5px 10px;
}