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

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

إن الشريط الإعلاني القابل للإغلاق هو شريط إشعارات أو رسائل يظهر في أعلى (أو أسفل) الصفحة ويمكن للمستخدم إغلاقه. غالبًا ما تُستخدم هذه الأشرطة لعرض معلومات مهمة، مثل سياسات ملفات تعريف الارتباط، أو الإعلانات، أو التحذيرات. الميزة الأساسية هي زر الإغلاق (×) الذي يتيح للمستخدم إخفاء الشريط دون إعادة تحميل الصفحة.

أولاً، لنقم بإضافة هيكل 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 لجعل الشعار قابلاً للإغلاق:

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

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

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

التحدي

سهل

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

أضف مستمع حدث (event listener) بحيث يتم تشغيل دالة (function) عند النقر على زر الإغلاق.
داخل هذه الدالة، قم بتعيين خاصية display لعنصر الشعار إلى none ليتم إخفاؤه.

جرّب بنفسك

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