Перейти к содержимому
<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"; } });
Results:
×
