如何创建：创建弹出消息

学习如何使用 CSS 创建弹出消息（Callout Message）。

弹出消息

弹出消息通常位于页面底部，用于通知用户一些特殊事项：提示/技巧、折扣、需要采取的行动等。

亲自试一试

创建弹出消息

第一步 - 添加 HTML：

<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Some text...</p>
  </div>
</div>

如果您想要关闭弹出消息的功能，请添加一个 <span> 元素，并为其设置一个 onclick 属性，该属性表示“当您点击我时，隐藏我的父元素”，即容器 <div class="callout">。

提示：使用 HTML 实体 "&:times;" 创建字母 "x"。

第二步 - 添加 CSS：

为弹出消息框和关闭按钮设置样式：

/* 弹出消息框 - 固定在页面底部的位置 */
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

/* 弹出消息标题 */
.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

/* 弹出消息容器/主体 */
.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
}

/* 关闭按钮 */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* 鼠标悬停时更改颜色 */
.closebtn:hover {
  color: lightgrey;
}

亲自试一试

相关页面

教程：如何创建警告消息

教程：如何创建便签