วิธีสร้างข้อความเรียกความสนใจ (Callout Messages) ด้วย CSS

ตัวอย่างการสร้าง Callout Message แบบคงที่ (Fixed Position)

Callout message คือกล่องข้อความที่แสดงมุมหน้าจอ (มักอยู่มุมขวาล่าง) เพื่อดึงดูดความสนใจผู้ใช้ เช่น แจ้งโปรโมชั่น ข่าวสาร หรือการกระทำที่ควรทำ ทำได้ด้วย CSS position: fixed และ JavaScript สำหรับปิดกล่อง

โค้ดตัวอย่างเต็ม

<!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>ตัวอย่าง Callout Message</h1>
  <h3>สินค้า 2</h3>
  <h3>สินค้า 3</h3>
  <h3>สินค้า 4</h3>
  <div class="callout">
    <div class="calloutHeading">เช็คโปรโมชั่นของเรา</div>
    <span class="close" onclick="this.parentElement.style.display='none';">×</span>
    <div class="calloutMessage">
      <p>ก่อนออกจากหน้านี้ อย่าลืมเช็คโปรโมชั่นอื่นๆ <a href="#">ดูเลย</a></p>
    </div>
  </div>
</body>
</html>

คำอธิบายสำคัญ

• position: fixed – ทำให้กล่องติดอยู่ตำแหน่งเดิมแม้จะเลื่อนหน้าจอ
• bottom: 35px; right: 20px – วางตำแหน่งมุมขวาล่าง
• ปุ่มปิด (×) ใช้ JavaScript inline onclick ซ่อนกล่อง
• เหมาะสำหรับ: แจ้งข่าว, โปรโมชั่น, เรียกการกระทำ (CTA)

สามารถปรับแต่งขนาด สี ฟอนต์ และตำแหน่งได้ตามต้องการ รองรับการแสดงผลบนมือถือด้วย max-width