关闭一个弹出窗口,打开另一个
Close one pop-up, when opening another
我的弹出窗口工作得很好,但单击时它们都会保持打开状态,而不是一次只允许一个弹出窗口。我发现有人问过这个问题,但我认为我对 JS 的了解非常低级,不允许我轻松地将为别人的代码给出的答案修改为我自己的代码。这里是大菜鸟
JS
` function myFunction(event) {
event.target.children[0].classList.toggle("show");
}`
HTML
<div class="popup" onclick="myFunction(event)">Select 1 <span class="popuptext" id="myPopup">Tet Here </span></div>
<div class="popup" onclick="myFunction(event)">Select 2 <span class="popuptext" id="myPopup1"> Text Here</span></div>
Select 3 文本在这里
CSS
.page-writing .popup {
height: 3em:
width: 3em;
position: relative;
position: relative;
display: inline-block;
cursor: pointer;
font-family:bookmania, serif;
font-size: .8rem;
color: black;
-webkit-opacity: .6;
-moz-opacity: .6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-writing .popuptext {
visibility: hidden;
height: 6em;
width: 20em;
color: purple;
overflow: auto;
text-align:left;
border-radius: 1em;
padding: 1em;
position: absolute;
z-index: 1;
top: 85%;
left: 0%;
margin-top: .5em;
}
.page-writing .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px:
border-width 2px;
border-style:none;
border-color: transparent;
}
.page-writing .popup .show{
visibility: visible;
-webkit-animation: easeIn 1.5s;
animation: easeIn 1.5s;
}
@-webkit-keyframes easeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes easeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
尝试以下方法:
var lastPopup;
function myFunction(event) {
lastPopup && lastPopup.classList.remove("show");
lastPopup = event.target.children[0];
lastPopup.classList.toggle("show");
}
我的弹出窗口工作得很好,但单击时它们都会保持打开状态,而不是一次只允许一个弹出窗口。我发现有人问过这个问题,但我认为我对 JS 的了解非常低级,不允许我轻松地将为别人的代码给出的答案修改为我自己的代码。这里是大菜鸟
JS
` function myFunction(event) {
event.target.children[0].classList.toggle("show");
}`
HTML
<div class="popup" onclick="myFunction(event)">Select 1 <span class="popuptext" id="myPopup">Tet Here </span></div>
<div class="popup" onclick="myFunction(event)">Select 2 <span class="popuptext" id="myPopup1"> Text Here</span></div>
Select 3 文本在这里
CSS
.page-writing .popup {
height: 3em:
width: 3em;
position: relative;
position: relative;
display: inline-block;
cursor: pointer;
font-family:bookmania, serif;
font-size: .8rem;
color: black;
-webkit-opacity: .6;
-moz-opacity: .6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.page-writing .popuptext {
visibility: hidden;
height: 6em;
width: 20em;
color: purple;
overflow: auto;
text-align:left;
border-radius: 1em;
padding: 1em;
position: absolute;
z-index: 1;
top: 85%;
left: 0%;
margin-top: .5em;
}
.page-writing .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px:
border-width 2px;
border-style:none;
border-color: transparent;
}
.page-writing .popup .show{
visibility: visible;
-webkit-animation: easeIn 1.5s;
animation: easeIn 1.5s;
}
@-webkit-keyframes easeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes easeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
尝试以下方法:
var lastPopup;
function myFunction(event) {
lastPopup && lastPopup.classList.remove("show");
lastPopup = event.target.children[0];
lastPopup.classList.toggle("show");
}