AI update: בצע שני שיפורים בדף הדמו של מספרת קובי שריקי: 1) הוסף פופ-אפ מכירה שנפתח אוטומטית כ-5 שניות אחרי כניסת המבקר לדף, ונגיש
This commit is contained in:
@@ -118,4 +118,89 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Popup functionality
|
||||
const popupOverlay = document.getElementById('popupOverlay');
|
||||
const popupClose = document.getElementById('popupClose');
|
||||
const floatingCta = document.getElementById('floatingCta');
|
||||
let popupShown = false;
|
||||
|
||||
function openPopup() {
|
||||
popupOverlay.classList.add('active');
|
||||
popupOverlay.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Focus the close button for accessibility
|
||||
setTimeout(() => {
|
||||
popupClose.focus();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
popupOverlay.classList.remove('active');
|
||||
popupOverlay.setAttribute('aria-hidden', 'true');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
// Return focus to floating button
|
||||
floatingCta.focus();
|
||||
}
|
||||
|
||||
// Auto-open popup after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (!popupShown) {
|
||||
popupShown = true;
|
||||
openPopup();
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// Floating CTA click
|
||||
if (floatingCta) {
|
||||
floatingCta.addEventListener('click', openPopup);
|
||||
}
|
||||
|
||||
// Close popup
|
||||
if (popupClose) {
|
||||
popupClose.addEventListener('click', closePopup);
|
||||
}
|
||||
|
||||
// Close on overlay click
|
||||
if (popupOverlay) {
|
||||
popupOverlay.addEventListener('click', function(e) {
|
||||
if (e.target === popupOverlay) {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close on escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && popupOverlay.classList.contains('active')) {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
|
||||
// Trap focus within popup when open
|
||||
if (popupOverlay) {
|
||||
const focusableElements = popupOverlay.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
const firstFocusable = focusableElements[0];
|
||||
const lastFocusable = focusableElements[focusableElements.length - 1];
|
||||
|
||||
popupOverlay.addEventListener('keydown', function(e) {
|
||||
if (e.key !== 'Tab') return;
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstFocusable) {
|
||||
lastFocusable.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastFocusable) {
|
||||
firstFocusable.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user