я написал скрипт для открытия модальных окон, он практически работает, только вот открывает не то (другое) окно. Подскажите, пожалуйста, как реализовать открытие окон. Ошибка заключается во 2 части js кода, в блоке if()
var closeModal = document.getElementsByClassName('close');
var modalWindows = document.getElementsByClassName('works-description');
for (var i = 0; i < closeModal.length; i++) {
closeModal[i].onclick = function () {
for (var j = 0; j < modalWindows.length; j++) {
modalWindows[j].style.display = 'none';
}
}
}
var openElement = document.getElementsByClassName('openingFigure');
for (var s = 0; s < openElement.length; s++) {
openElement[s].onclick = function openModalWindow () {
for (var m = 0; m < modalWindows.length; m++) {
var modalWindowAttributes = modalWindows[m].getAttribute('data-window');
if (modalWindowAttributes == openElement[s]) {
modalWindows[0].style.display = 'flex';
}
}
}
}
.work-cards-container {
box-sizing: border-box;
display: flex;
justify-content: space-around;
margin-top: 50px;
}
figure {
cursor: pointer;
width: 370px;
height: 270px;
background: #000;
color: #000;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
position: relative;
}
figure h2 {
transition: 0.2s;
transform: translateY(15px);
}
figure p {
transition: 0.1s;
transform: translateY(-5px);
visibility: hidden;
}
figure:before {
content: '';
position: absolute;
left: 5%;
top: 5%;
bottom: 5%;
right: 5%;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
transition: 0.2s;
transform: scaleX(0);
}
figure:hover:before,
figure:hover:after {
transform: scale(1);
}
figure:after {
content: '';
position: absolute;
left: 5%;
top: 5%;
bottom: 5%;
right: 5%;
border-left: 2px solid #000;
border-right: 2px solid #000;
transition: 0.2s;
transform: scaleY(0);
}
figure:hover h2,
figure:hover p {
transform: translateY(0);
visibility: visible
}
.close {
cursor: pointer;
position: absolute;
font-size: 22px;
right: 10px;
top: 5px;
}
.works-description h2 {
font-size: 40px;
margin-bottom: 20px;
}
.works-description img {
display: block;
width: 400px;
height: 316px;
}
.works-description {
position: fixed;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
justify-content: center;
transition: 1s ease-out;
display: none;
}
.works-description-block {
display: flex;
background: #fff;
border: 2px solid #94969E;
width: 70%;
position: fixed;
top: 50px;
padding: 10px;
}
.works-description-text {
margin-left: 30px;
}
.works-description-text h3 {
font-size: 30px;
margin-bottom: 7px;
margin-top: 20px;
font-weight: 546;
}
.works-description-text p {
font-size: 18px;
}
.works-description-text a {
display: block;
text-decoration: none;
color: #94969E;
padding: 10px;
padding-top: 12px;
padding-bottom: 12px;
border: 1px solid #94969E;
width: 240px;
text-align: center;
}
<div class="work-cards-container">
<figure class="wow fadeInLeft batsam-figure openingFigure" id="batsam">
<figcaption>
<h2>Batsam</h2>
<p>Дизайн, верстка</p>
</figcaption>
</figure>
<figure class="wow fadeInRight moroz-figure openingFigure" id="moroz">
<figcaption>
<h2>Сайт Деда Мороза</h2>
<p>Верстка</p>
</figcaption>
</figure>
</div>
<div id="batsamWindow" data-window="0" class="works-description">
<div class="works-description-block">
<a id="close" data-close="0" class="close">✖</a>
<div class="img-block">
<img src="img/mini-batsam-bg.png" alt="">
</div>
<div class="works-description-text">
<h2>Batsam Cofee</h2>
<h3>Задача</h3>
<p>Сделать редизайн страницы</p>
<h3>Сроки</h3>
<p>5 дней</p>
<h3>Бюджет: 5 тыс. рублей</h3>
<a href="http://coffee.podarok.click/">Перейти на сайт</a>
</div>
</div>
</div>
<div id="morozWindow" data-window="1" class="works-description">
<div class="works-description-block">
<a id="close-moroz" data-close="1" class="close">✖</a>
<div class="img-block">
<img src="img/moroz-bg.png" alt="">
</div>
<div class="works-description-text">
<h2>Сайт деда мороза</h2>
<h3>Задача</h3>
<p>Сделать частичный редизайн страницы</p>
<h3>Сроки</h3>
<p>1 день</p>
<h3>Бюджет: 1 тыс. рублей</h3>
<a href="http://moroz.podarok.click/">Перейти на сайт</a>
</div>
</div>
</div>