我怎样才能让这个弹出自动？

Question

我的密码是

function PopUp() {
  document.getElementById('ac-wrapper').style.display = "none";
}

#ac-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .6);
  z-index: 1001;
}

#popup {
  width: 555px;
  height: 375px;
  background: #FFFFFF;
  border: 5px solid #000;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  top: 150px;
  left: 375px;
}

<div id="ac-wrapper">
  <div id="popup">
    <center>
      <h2>Popup Content Here</h2> <input type="submit" name="submit" value="Submit" onClick="PopUp()" />
    </center>
  </div>
</div>

如何强制弹出窗口在页面打开后 5 秒自动打开？

Answer 1

首先，不要post在评论中编码，post它在原问题中。

其次，您可以通过简单地调用它来执行函数（即 'automatic'，因为不需要用户输入），PopUp().

第三，要添加延迟，有 setTimeout(func, delay) 功能。

第四，遵守通用的样式指南。例如，

单引号 ' 而不是 " 在 JS 中可能的话；
小写函数名称 popUp;
space 在 func 定义中的大括号之前；
不要直接在JS中调整样式，而是切换一个class。

  function popUp() {
    document.getElementById('ac-wrapper').style.display = 'none';
    // document.getElementById('ac-wrapper').classList.toggle('hidden');
  }
  setTimeout(popUp, 5000);

Answer 2

您可以通过 Javascript 或 CSS 和一些 JS 来实现这一点，以便在关闭弹出窗口上添加 class 单击事件。

//JS

setTimeout(function(){ 
  document.getElementById('ac-wrapper').style.display = 'block';
}, 5000);

//CSS
div {
  opacity: 0;
  pointer-events: none;
  animation-name: showPopup;
  animation-delay: 5s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes mymove {
  from {
   opacity: 0;
   pointer-events: none;
  }
  to {
   opacity: 1;
   pointer-events: auto;
  }
}

div.hidden {
  display: none;
  pointer-events: none; // just to be sure
}

我怎样才能让这个弹出自动？

How can I make this pop up automatic?

html

javascript

css

popup