我遇到以下问题:我做了一个弹出窗口的简单实现,但是当我将其关闭并将光标放在以前是弹出窗口的空白区域时,我现在可以单击此处(在空白区域)和弹出窗口再次出现。也就是说,它似乎没有关闭,而是保留在它先前占据的区域中。可以请某人帮助我,因为我不知道如何永久关闭它。
function fPopUp() {
var PopUp = document.getElementById("IDPopUp");
PopUp.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: absolute;
/*display: block;*/
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
/*display: none;*/
width: 500px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<button id="bAbout" onclick="fPopUp()">PopUp</button>
<div class="popup" onclick="fPopUp()">
<span class="popuptext" id="IDPopUp">"some text"</span>
</div>
使用visibility: hidden
将隐藏元素,但该元素仍将在文档上占据其预定空间。要完全隐藏该元素,您需要使用display: none
,但这不适用于动画。
您的代码使事情变得复杂得多,所以请允许我进行一些修改。这里有一些建议: