есть много ссылок(квадратики) на модальное окно с картинками. В модальном окне выбирается картинка. Нужно реализовать: из какой ссылки(квадратика) было вызвано модальное окно, туда и нужно поместить выбранную картинку
Ответ
Надеюсь я тебя правильно понял...
var img = document.getElementsByTagName('img');
var block = document.getElementsByClassName('block');
var index = null;
for (let i = 0; i < block.length; i++) {
block[i].addEventListener('click', function() {
document.querySelector('#modal').classList.add('modal');
index = i;
})
}
for (let i = 0; i < img.length; i++) {
img[i].addEventListener('click', function() {
block[index].style.backgroundImage = 'url(' + img[i].src + ')';
document.querySelector('#modal').classList.remove('modal');
index = null;
})
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
background: #454544;
}
#wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
#modal {
overflow: hidden;
position: fixed;
opacity: 0;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
background: rgba(20, 20, 20, 0.9);
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
transition: all .1s;
}
#modal.modal {
overflow: hidden;
position: fixed;
opacity: 1;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: rgba(20, 20, 20, 0.7);
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
transition: opacity 0.1s, width 0.3s, heigth 0.3s 0.3s, background 0.1s;
}
img {
width: 330px;
height: 200px;
margin-left: 5px;
border-radius: 5px;
border: 1px solid black;
}
.block {
float: left;
width: 330px;
height: 200px;
margin-top: 50px;
margin-left: 20px;
border: 1px solid gray;
transition: background 0.5s 0.1s;
border-radius: 5px;
background-image: url(https://avatars.mds.yandex.net/get-pdb/1016500/02e248bb-ced8-489a-ad98-30a6259ce7fe/s1200);
background-size: cover;
}
Комментариев нет:
Отправить комментарий