Biểu ngữ có thể đóng

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 9 trên 27.

Biểu ngữ có thể đóng là thanh thông báo hoặc tin nhắn xuất hiện ở đầu (hoặc cuối) trang và người dùng có thể đóng lại. Biểu ngữ này thường dùng để hiển thị thông tin quan trọng như chính sách cookie, thông báo hoặc cảnh báo. Đặc điểm chính là nút đóng (×), cho phép người dùng ẩn biểu ngữ mà không cần tải lại trang.

Đầu tiên, hãy thêm cấu trúc HTML:

<div class="banner" id="banner">
  <p>This is an important announcement!</p>
  <button id="closeBanner">X</button>
</div>

Tiếp theo, hãy thêm một ít CSS cơ bản để tạo kiểu cho biểu ngữ:

.banner {
  background-color: #1e90ff;
  color: white;
  padding: 15px 20px;
  text-align: center;
  position: relative;

}

.banner button {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;

  cursor: pointer;
}

Cuối cùng, thêm JavaScript để có thể đóng biểu ngữ:

const banner = document.getElementById('banner');
const closeBtn = document.getElementById('closeBanner');

closeBtn.addEventListener('click', function() {
  banner.style.display = 'none';
});

Khi bạn nhấp vào nút đóng, biểu ngữ sẽ biến mất.

Thử thách

Dễ

Ta muốn biểu ngữ biến mất khi người dùng nhấp vào nút đóng.

Thêm bộ lắng nghe sự kiện để khi người dùng nhấp vào nút đóng, một hàm (function) sẽ chạy.
Bên trong hàm này, đặt thuộc tính display của phần tử biểu ngữ thành none để ẩn biểu ngữ.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Dismissible Banner Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Biểu ngữ -->
  <div class="banner" id="banner">
    <p>Big News! Our new course is live. Enroll today and get 30% off!</p>
    <button id="closeBanner">&times;</button>
  </div>

  <!-- Nội dung trang -->
  <header class="hero">
    <h1>Welcome to CodeLearn</h1>
    <p>Practical lessons to sharpen your web development skills 🚀</p>
  </header>

  <main class="content">
    <section>
      <h2>Learn by Doing</h2>
      <p>Each lesson comes with tasks and challenges so you can practice immediately.</p>
    </section>

    <section>
      <h2>Topics We Cover</h2>
      <ul>
        <li>HTML & CSS basics</li>
        <li>JavaScript essentials</li>
        <li>Frontend projects</li>
        <li>Interactive UI components</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 CodeLearn. All rights reserved.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>