Question

我有一个客户在其Shopify商店上要求启动屏幕（我知道这对UX不利-我试图让他们退出）。我创建了一个具有固定位置的div。但是，我之前没有对Cookie做任何事情，也无法弄清楚如何阻止它显示在同一用户会话中。这是代码段：

const splashContainer = document.querySelector(".splash-container");                              
  const removeSplash = function(){

    splashContainer.classList.add("splash-container--clicked");
  }

.splash-container {
  position: fixed;
  top: 0;
  left:0;
  background-color: black;
  z-index: 100000000000000000000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.splash-container--clicked {
  display: none;
}

.splash-logo {
  max-width: 300px;
}

.splash-tagline {
  margin-top: 1em;
  width: 60%;
  text-align: center;
  animation: flickerAnimation 4s infinite;
}

.splash-button {
  background-color: #ed9413;
  color: #3c2606;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  padding: 0.75em 4em;
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

<div class="splash-container">
  <h3 class="splash-tagline">May all that you do bring you peace</h3>
  <button class="splash-button" onclick="removeSplash()">Enter</button>
</div>

我认为这可能会有所帮助，但我想尽可能避免使用jquery：Display A Popup Only Once Per User

有人可以帮忙吗？

如何停止在同一会话中显示初始屏幕？

0 个答案: