jquery 切换一个弹出窗口，然后自动隐藏弹出窗口答案

【问题标题】：jquery Toggle a popup and then auto hide the popupjquery 切换一个弹出窗口，然后自动隐藏弹出窗口
【发布时间】：2017-03-25 22:01:02
【问题描述】：

我想在单击鼠标时简单地切换一个弹出窗口，然后在几秒钟后自动隐藏该弹出窗口。

这是我目前所拥有的。（这是从 w3schools 借来的）。现在，当我单击时会显示弹出窗口，但除非我再次单击该元素，否则它不会消失。怎么会自动隐藏呢？

</head>
<body style="text-align:center">

<h2>Popup</h2>

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

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

</body>
</html>

【问题讨论】：

标签： jquery popup

【解决方案1】：

你可以使用setTimeout:

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
    //
    // execute the timeout function after 1 second
    //
    setTimeout(function() {
        document.getElementById("myPopup").classList.toggle("show");
    }, 1000);
}

.popuptext {
    visibility: hidden;
}
.show {
    visibility: visible;
}

<h2>Popup</h2>

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

仅使用 CSS transition:

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

.popuptext {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}
.show {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}

<h2>Popup</h2>

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

【讨论】：

谢谢！惊人的响应时间:) 还有一个问题...有没有办法让它超时并淡出而不是立即隐藏？