如何让我的JavaScript弹出窗口在每个会话中只显示一次?

uklbhaso  于 2023-02-11  发布在  Java
关注(0)|答案(2)|浏览(336)

我已经创建了一个网站弹出窗口的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>

我使用了一个函数来确保弹出窗口只在用户滚动到顶部时出现,但我需要它在每个会话中只出现一次。

yqlxgs2m

yqlxgs2m1#

在函数之前的某个地方创建一个变量,例如index = 0,然后在scroll函数中,将1添加到indexindex += 1,然后在函数中添加if语句,该语句将检查index是否为0,这意味着它还没有滚动,如果是,则它已经被滚动并且将不进行到功能的其余部分。

let index = 0;
window.addEventListener('scroll', function() {
   if (window.pageYOffset === 0) {
      index += 1;
      if (index < 0) {
          *your code*
      }
   }
}
tyg4sfes

tyg4sfes2#

在向用户显示事件后解除绑定,以便不再调用该事件

const scrollCode = () {
  if (window.pageYOffset === 0) {
    sessionStorage.setItem('popupShown', '1');
    window.removeEventListener('scroll', scrollCode);
    /* your pop up code */
  }
};

if (!sessionStorage.getItem('popupShown') {
  window.addEventListener('scroll', scrollCode)
}

相关问题