كود تهنئة بعيد الأضحى المبارك للمواقع والمدونات بشكل مميز

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

الكود يبدأ بتعريف أنماط CSS التي تحدد مظهر النافذة المنبثقة. تم تعيين النافذة بموضع ثابت (fixed) في وسط الصفحة وتم تعيين عرضها وارتفاعها ولون الخلفية وحاشية وإطار وتنسيق النص داخلها. تم تحديد خاصية العرض بالقيمة none لإخفاء النافذة في البداية.

ثم يأتي العنصر الفعلي للنافذة المنبثقة المحتوي على زر إغلاق "X" وصورة وعنوان. تم تعيين وظيفة JavaScript (closePopup) للزر لإخفاء النافذة عند النقر عليه.

بعد ذلك، تأتي الجزء الخاص بالسيناريو الزمني لظهور النافذة. تم استخدام دالة setTimeout في JavaScript لتعيين فترة زمنية قبل ظهور النافذة. في الكود الأصلي، تم تعيين الوقت بـ 10 ثانية (10000 ميلي ثانية). ولكن في هذا الشرح، سنغير الوقت إلى 15 ثانية (15000 ميلي ثانية) كمثال.

في الجزء الأخير من الكود، يتم تنفيذ السطور التالية:

يتم الحصول على عنصر النافذة المنبثقة باستخدام معرف العنصر (getElementById) وتعيينها إلى متغير popup.

يتم تعيين خاصية العرض للنافذة (popup.style.display) بالقيمة block لجعلها ظاهرة.

تم استخدام دالة setTimeout لتعيين فترة زمنية 15 ثانية (15000 ميلي ثانية) قبل تنفيذ السطور التالية:

يتم الحصول مرة أخرى على عنصر النافذة المنبثقة وتعيينها إلى المتغير popup.

يتم تعيين خاصية العرض للنافذة بالقيمة none لإخفائها.

بهذا الشكل، يتم إظهار النافذة بعد فترة زمنية محددة (15 ثانية) وتختفي تلقائيًا إذا لم يتم إغلاقها من قبل الزائر. يمكنك تعديل الوقت المحدد في الكود وفقًا لاحتياجاتك.

للحصول على كود تهنئة بعيد الأصحى المبارك :

<!doctype html>
<html>
<head>
  <style>
    #popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      background-color: white;
      border: 1px solid black;
      padding: 20px;
      display: none;
      z-index: 9999; /* تحديد الطبقة العليا للنافذة */
    }

#closeBtn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: red; /* تغيير لون زر الإغلاق إلى الأحمر */
    }

#popup img {
      display: block;
      margin: 0 auto;
      width: 200px;
      height: auto;
    }

#popup h2 {
      text-align: center;
      font-size: 18px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="popup">
    <span id="closeBtn" onclick="closePopup()">X</span>
    <img src="https://i.pinimg.com/originals/e0/f0/ce/e0f0ce405babe36de2f8774ab5816ebe.png" alt="خروف" />
    <h2>كل عام وأنتم بخير وعيد سعيد!</h2>
  </div>

// ضبط ظهور النافذة
    var popup = document.getElementById('popup');
    popup.style.display = 'block';

// إغلاق النافذة تلقائيًا بعد 15 ثانية
    setTimeout(function() {
      var popup = document.getElementById('popup');
      popup.style.display = 'none';
    }, 15000); // ضبط الوقت هنا بالميلي ثانية (15 ثانية = 15000 ميلي ثانية)
  </script>
</body>
</html>

موقع النصر التقنى

كود تهنئة بعيد الأضحى المبارك للمواقع والمدونات بشكل مميز

في الجزء الأخير من الكود، يتم تنفيذ السطور التالية:

للحصول على كود تهنئة بعيد الأصحى المبارك :

مهندس محمد نصر