Bannières fermables

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 9 sur 27.

Une bannière pouvant être fermée est une barre de notification ou de message qui apparaît en haut (ou en bas) de la page et que l’utilisateur peut fermer. Elle est souvent utilisée pour afficher des informations importantes, comme les politiques relatives aux cookies, des annonces ou des avertissements. Sa fonctionnalité principale est le bouton de fermeture (×) qui permet à l’utilisateur de masquer la bannière sans actualiser la page.

Commençons d’abord par ajouter la structure HTML :

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

Ensuite, ajoutons un peu de 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 Dismissible :

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 afin que, lorsque le bouton de fermeture est cliqué, une fonction s’exécute.
Dans cette fonction, définissez la propriété display de l’élément de la bannière sur none afin 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>

  <!-- Bannière -->
  <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>

  <!-- Contenu de la page -->
  <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>