إضافة رسائل منبثقة مخصصة لزيادة التفاعل بناءً على سلوك المستخدم💬

<div id="popup" class="popup-container">
  <div class="popup-content">
    <span class="close-btn" onclick="closePopup()">×</span>
    <h2>اشترك للحصول على تحديثات جديدة!</h2>
    <p>سجل بريدك الإلكتروني لتبقى على اطلاع دائم بكل جديد.</p>
    <input type="email" placeholder="أدخل بريدك الإلكتروني" class="popup-input">
    <button class="popup-btn">اشترك الآن</button>
  </div>
</div>
    

.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.popup-content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}

.popup-content h2 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.popup-input {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.popup-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.popup-btn:hover {
  background-color: #45a049;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
    

setTimeout(function() {
  document.getElementById('popup').style.display = 'block';
}, 5000); // يظهر بعد 5 ثواني

function closePopup() {
  document.getElementById('popup').style.display = 'none';
}
    

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

.popup-content {
  animation: fadeIn 0.5s ease-in-out;
  animation-name: animate__fadeInDown;
}

document.addEventListener('mouseout', function(event) {
  if (!event.toElement && !event.relatedTarget && event.clientY < 10) {
    document.getElementById('popup').style.display = 'block';
  }
});
    

window.onscroll = function() {
  if (window.scrollY > 800) { 
    document.getElementById('popup').style.display = 'block';
  }
};