📌  相关文章
📜  没有页面刷新的警报 - CSS (1)

📅  最后修改于: 2023-12-03 15:11:04.552000             🧑  作者: Mango

没有页面刷新的警报 - CSS

在网页开发中，经常需要在用户操作后及时给出反馈，以便用户能够知道操作是否成功或失败。通常可以通过弹出警报框（alert）或者页面的跳转等方式实现。但这些方式都需要页面刷新，用户体验并不是很好。本文将介绍一种依靠CSS实现的页面警报，不需要页面刷新，用户体验良好。

什么是CSS页面警报？

CSS页面警报是一种基于CSS的网页提示方式，通过CSS样式实现，不需要像JS一样操作DOM元素，既简单又方便。这种提示方式可以做成很多样式，比如警告框、成功框、失败框、信息框等等。

如何实现？

实现页面警报的基本思路是在页面中添加一个标准显示区域，通过CSS样式的显示与隐藏实现弹出和关闭警报的交互效果。

HTML结构

首先，我们需要在页面中添加一个标准显示区域，作为页面警报的容器，在其中添加警报的文字内容。

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  警报内容
</div>

可以看到HTML结构非常简单，主要包括一个class="alert"的div元素，和位于其中的一个class="closebtn"的close按钮和文字内容。

CSS样式

接下来，我们需要为页面警报添加样式，实现弹出和关闭效果。

/* 警报框的默认样式 */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  border: none;
  position: fixed;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  width: 300px;
}

/* 鼠标悬浮在警报框上时 */
.alert:hover {
  cursor: pointer;
}

/* 关闭按钮样式 */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* 鼠标悬浮在关闭按钮上时 */
.closebtn:hover {
  color: black;
}

可以看到CSS样式也非常简单，主要包括对默认样式、鼠标悬浮和关闭按钮样式的设置。

JS交互

最后，我们需要通过JS实现警报的弹出和关闭。可以使用以下代码：

//弹出警报
function showAlert() {
  document.querySelector('.alert').style.display = 'block';
}

//关闭警报
function closeAlert() {
  document.querySelector('.alert').style.display = 'none';
}

这样，页面上就可以通过调用showAlert()函数来弹出警报，并通过调用closeAlert()函数来关闭警报。

完整代码

为了方便大家使用和参考，这里提供完整的代码片段：

<!DOCTYPE html>
<html>
<head>
<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  border: none;
  position: fixed;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  width: 300px;
}

.alert:hover {
  cursor: pointer;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
</style>
</head>
<body>

<h2>页面警报示例</h2>

<!-- 警报框 -->
<div class="alert">
  <span class="closebtn"
        onclick="this.parentElement.style.display='none';">
        &times;
  </span> 
  警报内容
</div>

<!-- 弹出警报按钮 -->
<button onclick="showAlert()">弹出警报</button>

<!-- 关闭警报按钮 -->
<button onclick="closeAlert()">关闭警报</button>

<script>
//弹出警报
function showAlert() {
  document.querySelector('.alert').style.display = 'block';
}

//关闭警报
function closeAlert() {
  document.querySelector('.alert').style.display = 'none';
}
</script>

</body>
</html>
总结

CSS页面警报是一种便捷好用的网页提示方式，适合用于各种信息提示的场景。本文介绍了如何使用HTML、CSS和JS来实现页面警报，希望能够对广大开发者有所帮助。