如何創建：創建彈出消息

學習如何使用 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;
}

親自試一試

相關頁面

教程：如何創建警告消息

教程：如何創建便簽