Я написал код. У меня есть кнопки, и каждая кнопка открывает всплывающее окно. Перед открытием я хочу, чтобы моя кнопка закрывала предыдущее всплывающее окно и открывала нужное. Я переключаю класс. Поэтому я хотел бы сначала проверить, есть ли какое-либо видимое всплывающее окно, используя getElementsByClassName(), а затем переключить его на скрытое. Затем переключите правую, используя getElementById() для отображения. Моя проблема в том, что я не знаю, как проверить видимость из моего класса .show, и если в моем Function2() сначала я буду переключаться по классу, то я не могу переключиться по id после него. Это почему? Поэтому мне нужно использовать If (стиль виден в элементе i) {then popups[i].classList.toggle("show");} после этого я хотел бы использовать:
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
, но он не работает. Или есть лучший способ сделать это?
function myFunction2() {
var popups = document.getElementsByClassName('popuptext');
for(var i = 0; i < 5; i++)
{
popups[i].classList.toggle("show");
console.log(1);
}
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
console.log(2);
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction3() {
var popup = document.getElementById("myPopup3");
popup.classList.toggle("show");
}
function myFunction4() {
var popup = document.getElementById("myPopup4");
popup.classList.toggle("show");
}
.popup {
position: absolute;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: auto;
}
/* POPUPS--------START------------------------------------------------------------------------------------------------------- */
.popup .popuptext {
visibility: hidden;width: 27%; height: 93%;background-color: #fff;
color: #004;text-align: left; border-radius: 0px;padding: 10px;
position: fixed ; top: 48%;left: 20%;transform: translate(-50%, -50%);
margin-left: -80px;border-left: 75px solid white; overflow:auto;border-right: 10px solid white;border-bottom: 35px solid white;
z-index: 10;border-top: 35px solid white;
box-shadow: inset 0 0 0 rgba(255,255,255,0.5), 2px 20px 2px rgba(0, 0, 0, 0.19);
}
/* POPUPS----------------END------------------------------------------------------------------------------------------ */
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
animation: move 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes move {
from {left: 0%;}
to {top:48% ;}
}
@-webkit-keyframes move {
from {left: 0%;}
to {top:48% ;}
}
/* ------------------------------------------------popup hide and show end*/
body{
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:15px;
color: #000;
bgcolor="#fff"
text-transform:uppercase;
//overflow-x:hidden;
}
h1{
font-size:80px;
text-align:right;
position:bottom;
right:340px;
top:300px;
font-weight:normal;
}
button{
border: none; padding: 12px;
text-align: center;text-decoration: none; display: inline-block;
cursor: auto; float: right;
}
.button1 {padding: 12px;border-radius: 100%;position: absolute;left: 1445px;top: 459px; background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}
.button2 {padding: 12px;border-radius: 100%;position: absolute;left: 1212px;top: 785px; background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}
.button3 {padding: 12px;position: absolute;left: 1412px;top: 785px; border-radius: 100%; background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}
.button4 {padding: 12px;border-radius: 100%;position: absolute;left: 140px;top: 78px; background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}
