Bannières refermables

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 9 sur 27.

Une bannière refermable est une barre de notification ou de message qui apparaît en haut (ou en bas) de la page et qui peut être fermée par l'utilisateur. Elles sont souvent utilisées pour afficher des informations importantes, comme les politiques relatives aux cookies, des annonces ou des avertissements. La caractéristique principale est le bouton de fermeture (×) qui permet à l'utilisateur de masquer la bannière sans rafraîchir la page.

Tout d'abord, ajoutons la structure HTML :

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

Ensuite, ajoutons du CSS de base pour styliser notre bannière :

.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;
}

Enfin, ajoutez du JavaScript pour rendre la bannière refermable :

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

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

Lorsque le bouton de fermeture est cliqué, la bannière disparaîtra.

Défi

Facile

Nous voulons que la bannière disparaisse lorsque l'utilisateur clique sur le bouton de fermeture.

Ajoutez un écouteur d'événement pour que, lorsque le bouton de fermeture est cliqué, une fonction s'exécute.
À l'intérieur de cette fonction, définissez la propriété display de l'élément banner sur none pour qu'il soit masqué.

Essayez vous-même

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

  <!-- Banner -->
  <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>

  <!-- Page Content -->
  <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>