带 Dismiss 的入门 CSS 警报

在网站的交互设计中，警报（Alert）是一个很常见的组件。在用户提交表单或进行某些操作时，提示用户结果或错误信息，或者提供其他帮助信息。一种经典的设计是一个带关闭按钮的警报框，以便用户查看信息并轻松地关闭它。本文将介绍如何使用 CSS 和 JavaScript 创建一个带 Dismiss 的入门警报。

HTML 结构

首先，我们需要创建一个基本的 HTML 结构，它将容纳我们的警报信息以及关闭按钮。我们需要一个包含文本的 div 元素，以及一个显示关闭图标的链接。

<div class="alert">
  This is an alert message.
  <a href="#" class="close">&times;</a>
</div>

注意，我们使用了一个类名 close 来标识关闭按钮，并在链接标签内使用了 HTML 实体 × 来显示 × 符号。

CSS 样式

为了使警报看起来像一个实际的警报，我们需要对其进行样式设置。以下是我们需要为 .alert 类创建的样式设置。

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  display: none;
}

这样，我们设置了警报的颜色，文本颜色和边距。我们还将它的显示样式设置为 none，以便在不需要时隐藏它。

现在，让我们创建一个带有关闭图标的 a.close 的样式设置。

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

这将使我们的关闭按钮可见，并在悬停或点击它时显示反转颜色。

JavaScript 动作

我们还需要一种方法来处理关闭按钮的点击事件。我们可以使用 JavaScript 来隐藏警报，并防止用户看到它们。

var close = document.getElementsByClassName("close");
var i;

for (i = 0; i < close.length; i++) {
  close[i].onclick = function(){
    var div = this.parentElement;
    div.style.display = "none";
  }
}

这个 JavaScript 碎片使用 DOM 查询选取了所有关闭按钮，并为每个按钮添加了一个单击事件监听器。当用户单击关闭按钮时，警报的样式 display 属性将设置为 none，从而隐藏它。

完整样式代码

/* 警报样式 */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  display: none;
}

/* 关闭按钮 */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* 显示警报 */
.show {
  display: block;
}

完整 JavaScript 代码

/* 关闭按钮动作 */
var close = document.getElementsByClassName("close");
var i;

for (i = 0; i < close.length; i++) {
  close[i].onclick = function(){
    var div = this.parentElement;
    div.style.display = "none";
  }
}

/* 显示警报 */
function showAlert() {
  var alert = document.getElementsByClassName("alert")[0];
  alert.classList.add("show");
  setTimeout(function(){
    alert.classList.remove("show");
  }, 3000);
}

结论

现在，我们已经创建了一个基本的带有关闭按钮的警报，这个警报在用户单击关闭按钮时隐藏。此外，还设置了一个 JavaScript 函数 showAlert() 来显示警报并在一定时间后隐藏它。

以上是一个简单的入门级 CSS 警报的设计，你可以使用类似的方法将更多的交互性和样式应用于你的警报。