如何设置弹出窗口的超时时间？

Question

我创建了一个弹出窗口，当单击一个按钮时会出现，但是要使其消失，必须再次单击。 有没有办法设置计时器并使它消失？

这是代码：

 // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } 

 .popuptext { display: none; } .popuptext.show { display: block; } 

 <div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> 

Answer 1

我建议您阅读w3schools或mozilla dev 上的 setTimeout()函数，这两个都是编程初学者的两个不错的站点。

您的问题可以如以下代码片段所示来解决：

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");

  if(popup.classList.contains("show")) // Check if the popup is shown
     setTimeout(() => popup.classList.remove("show"), 10000) // If yes hide it after 10000 milliseconds
}

Answer 2

我将使用setTimeout：

 function myFunction(el) { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); setTimeout(() => { popup.classList.remove("show"); }, 10000) } 

 div { display: none; } .show { display: block !important; } 

 <button onclick="myFunction()">Show div below</button> <br/> <div id="myPopup">No longer hidden</div> 

Answer 3

 <script> // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); //Try this, setTimeout takes a callback function to be executed after an amount of time, in this case 3000 milliseconds is 3 seconds setTimeout(function(){ popup.classList.toggle("show"); },3000) } </script> 

Answer 4

这应该工作

function myFunction() {
  var popup = document.getElementById("myPopup");
        document.getElementById("myPopup").style.display= "block"

    setTimeout(function(){ 
    document.getElementById("myPopup").style.display= "none"
   }, 3000);
}