Главная
Направление
Новости
Мои работы
Мои статьи
<div class="container"> <div class="row mt-3"> <div class="col-4"> <img id="img-1" src="https://i.artfile.ru/6000x4000_1349302_[www.ArtFile.ru].jpg" alt="Скрипка" width="300"> </div> <div class="col-4"> <img id="img-2" src="https://top10.travel/wp-content/uploads/2014/12/hram-vasiliya-blazhennogo.jpg" alt="Достопримечательности" width="300"> </div> <div class="col-4"> <img id="img-3" src="https://img.championat.com/s/735x490/news/big/l/w/skvosh-triatlon-zorbing-chto-vybrat-v-2019_15488563261718964122.jpg" alt="Спорт" width="300"> </div> </div> </div> <!-- Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="modalImg"> </div>
// Get the modal element and images var modal = document.getElementById("myModal"); var modalImg = document.getElementById("modalImg"); var img1 = document.getElementById("img-1"); var img2 = document.getElementById("img-2"); var img3 = document.getElementById("img-3"); var closeBtn = document.getElementsByClassName("close")[0]; function openModal(imgSrc) { modal.style.display = "block"; modalImg.src = imgSrc; } img1.addEventListener("click", function () { openModal(img1.src); }); img2.addEventListener("click", function () { openModal(img2.src); }); img3.addEventListener("click", function () { openModal(img3.src); }); closeBtn.addEventListener("click", function () { modal.style.display = "none"; }); window.addEventListener("click", function (event) { if (event.target == modal) { modal.style.display = "none"; } });
.modal { display: none; position: fixed; z-index: 1; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; max-width: 80%; max-height: 80%; } .close { position: absolute; top: 15px; right: 35px; font-size: 30px; color: white; cursor: pointer; }
Results:
×
