我已经创建了一个网站弹出窗口的JavaScript代码。我需要弹出窗口只出现在用户滚动回页面顶部,每次会话只出现一次。
我使用下面的函数告诉弹出窗口在用户滚动回顶部时出现:
window.addEventListener('scroll', function() {
if (window.pageYOffset === 0) {
它的工作,但弹出窗口现在出现每次用户滚动到顶部,而不是只有一次,每个会话一样,我已经编码它。
我想只使用JavaScript来实现这一点
下面是一个链接,您可以在其中看到它的实际应用〉〉https://digitalcloud.co.za/kiron/
这是完整的剧本
<script>
// Check if the popup has already been shown during the current session
if (!sessionStorage.getItem('popupShown')) {
window.addEventListener('scroll', function() {
if (window.pageYOffset === 0) {
var popup = document.createElement("div");
popup.style.position = "fixed";
popup.style.top = "0";
popup.style.left = "0";
popup.style.zIndex = "999";
popup.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
popup.style.width = "100vw";
popup.style.height = "100vh";
popup.style.display = "flex";
popup.style.alignItems = "center";
popup.style.justifyContent = "center";
var innerPopup = document.createElement("div");
innerPopup.style.backgroundColor = "black";
innerPopup.style.display = "flex";
innerPopup.style.flexDirection = "column";
innerPopup.style.alignItems = "center";
innerPopup.style.justifyContent = "center";
innerPopup.style.padding = "40px";
innerPopup.style.margin = "35px";
innerPopup.style.borderRadius = "25px";
var img = document.createElement("img");
img.src = "https://digitalcloud.co.za/wp-content/uploads/2023/01/kerridge_pop_up_illustration.png ";
img.alt = "Find out about Kerridge’s core solution ";
img.style.width = "25%";
img.style.cursor = "pointer";
innerPopup.appendChild(img);
var text = document.createElement("p");
text.innerHTML = "Interested to find out more about our core solution?";
text.style.color = "white";
text.style.marginTop = "50px";
text.style.textAlign = "center";
text.style.fontSize = "20px";
innerPopup.appendChild(text);
var button = document.createElement("button");
button.innerHTML = "Book a free demo today";
button.style.backgroundColor = "#E8017B";
button.style.color = "white";
button.style.fontSize = "20px";
button.style.padding = "15px";
button.style.borderRadius = "50px"
button.style.border = "none"
button.onclick = function() {
location.href = "https://digitalcloud.co.za/ ";
}
innerPopup.appendChild(button);
var secondText = document.createElement("p");
secondText.innerHTML = "Stay up to date with the latest Kerridge product updates and existing announcements";
secondText.style.color = "white";
secondText.style.marginTop = "50px";
secondText.style.textAlign = "center";
secondText.style.fontSize = "20px";
innerPopup.appendChild(secondText);
var secondButton = document.createElement("button");
secondButton.innerHTML = "Sign up to our Newsletter";
secondButton.style.color = "#E8017B";
secondButton.style.background = "transparent";
secondButton.style.border = "none";
secondButton.style.fontSize = "20px";
secondButton.onclick = function() {
location.href = "https://digitalcloud.co.za/ ";
}
innerPopup.appendChild(secondButton);
var closeBtn = document.createElement("div");
closeBtn.style.position = "absolute";
closeBtn.style.top = "50px";
closeBtn.style.right = "50px";
closeBtn.style.cursor = "pointer";
closeBtn.style.width = "60px";
closeBtn.style.height = "60px";
closeBtn.style.borderRadius = "50%";
closeBtn.style.backgroundColor = "#E8017B";
closeBtn.style.display = "flex";
closeBtn.style.alignItems = "center";
closeBtn.style.justifyContent = "center";
closeBtn.setAttribute("tabindex", "0");
closeBtn.setAttribute("role", "button");
closeBtn.setAttribute("aria-label", "Close");
closeBtn.addEventListener("click", function() {
// Add logic to close something here
popup.remove();
});
closeBtn.addEventListener("keydown", function(event) {
if (event.key === "Enter" || event.key === " ") {
// Add logic to close something here
popup.remove();
}
});
var closeX = document.createElement("div");
closeX.innerHTML = "X";
closeX.style.color = "white";
closeX.style.fontWeight = "bold";
closeBtn.appendChild(closeX);
closeBtn.onclick = function() {
popup.remove();
}
innerPopup.appendChild(closeBtn);
popup.appendChild(innerPopup);
document.body.appendChild(popup);
// Set a value in sessionStorage indicating that the popup has been shown
sessionStorage.setItem('popupShown', 'true');
};
}
</script>
我使用了一个函数来确保弹出窗口只在用户滚动到顶部时出现,但我需要它在每个会话中只出现一次。
2条答案
按热度按时间yqlxgs2m1#
在函数之前的某个地方创建一个变量,例如
index = 0
,然后在scroll函数中,将1
添加到index
〉index += 1
,然后在函数中添加if
语句,该语句将检查index
是否为0
,这意味着它还没有滚动,如果是,则它已经被滚动并且将不进行到功能的其余部分。tyg4sfes2#
在向用户显示事件后解除绑定,以便不再调用该事件