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

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

首先，不要在评论中发布代码，将其发布在原始问题中。

其次，您可以通过简单地调用PopUp()来执行函数（即“自动”，因为不需要用户输入PopUp() 。

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

第四，坚持共同的造型准则。 例如，

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

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

Answer 2

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

//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
}