Tạo thông báo gọi hành động (Callout Messages) với CSS

Callout messages là các hộp thông báo cố định (fixed) thường xuất hiện ở góc màn hình để thu hút sự chú ý. Dưới đây là cách tạo một callout message có thể đóng được:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
  .callout {
    position: fixed;
    bottom: 35px;
    right: 20px;
    margin-left: 20px;
    max-width: 300px;
  }
  .calloutHeading {
    padding: 25px 15px;
    background: rgb(68, 93, 235);
    font-size: 30px;
    color: white;
  }
  .calloutMessage {
    padding: 15px;
    background-color: #ccc;
    color: black;
  }
  .close {
    position: absolute;
    top: 5px;
    right: 15px;
    color: white;
    font-size: 30px;
    cursor: pointer;
  }
  .close:hover {
    color: lightgrey;
  }
</style>
</head>
<body>
<h1>Ví dụ Callout Message</h1>
<h3>Sản phẩm 2</h3>
<h3>Sản phẩm 3</h3>
<h3>Sản phẩm 4</h3>
<div class="callout">
  <div class="calloutHeading">Xem ưu đãi của chúng tôi</div>
  <span class="close" onclick="this.parentElement.style.display='none';">×</span>
  <div class="calloutMessage">
    <p>Trước khi rời trang, đừng quên xem các ưu đãi khác <a href="#">Xem ngay</a></p>
  </div>
</div>
</body>
</html>

Giải thích

• position: fixed - Giữ callout ở vị trí cố định so với viewport
• bottom/right - Đặt ở góc dưới bên phải
• Nút đóng (×) - Sử dụng onclick để ẩn phần tử cha
• max-width: 300px - Giới hạn chiều rộng trên mobile

Mẫu này phù hợp cho quảng cáo, đăng ký newsletter, hoặc thông báo quan trọng.