لافتات قابلة للإغلاق

جزء من قسم JavaScript in Action في رحلة HTML على Coddy. الدرس 9 من 27.

إن dismissible banner هو شريط إشعار أو رسالة يظهر في top (أو bottom) الصفحة، وcan للمستخدم إغلاقه. يُستخدم هذا غالبًا لعرض معلومات important، مثل سياسات ملفات تعريف الارتباط، أو الإعلانات، أو التحذيرات. وتتمثل الميزة الأساسية في زر close (×) button الذي يتيح للمستخدم إخفاء banner دون تحديث الصفحة.

أولًا، لنضف بنية HTML:

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

بعد ذلك، لنُضِف بعض CSS الأساسي لتنسيق banner:

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

أخيرًا، أضف JavaScript لجعل banner قابلاً للإغلاق:

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

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

عند النقر على button الإغلاق، سيختفي banner.

التحدي

سهل

نريد أن يختفي الشريط عندما ينقر المستخدم على زر الإغلاق.

أضف مستمعًا لحدث بحيث تُشغَّل دالة عند النقر على زر الإغلاق.
داخل هذه الدالة، عيّن الخاصية display للعنصر banner إلى none حتى يتم إخفاؤه.

جرّب بنفسك

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

  <!-- بانر -->
  <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>

  <!-- محتوى الصفحة -->
  <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>