Перейти к содержимому
Главная
Направление
Новости
Работы ▾
HTML
JS
PHP
Мои статьи
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <div class="container"> <div class="row mt-3"> <div class="col-4"> <button id="delete-btn"> <img id="img-1" src="https://i.artfile.ru/6000x4000_1349302_[www.ArtFile.ru].jpg" alt="Скрипка" width="300"> </button> </div> <div class="col-4"> <button id="delete-btn2"> <img id="img-2" src="https://top10.travel/wp-content/uploads/2014/12/hram-vasiliya-blazhennogo.jpg" alt="Достопримечательности" width="300"> </button> </div> <div class="col-4"> <button id="delete-btn3"> <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"> </button> </div> </div> </div> <div id="popup" class="popup"> <div class="popup__content"> <h2 class="popup__title"> Модальное окно </h2> <div class="btn-container"> <button id="no-btn" class="popup__button"> Назад </button> </div> </div> </div>
const deleteBtn = document.getElementById("delete-btn"); const deleteBtn2 = document.getElementById("delete-btn2"); const deleteBtn3 = document.getElementById("delete-btn3"); const popup = document.getElementById("popup"); const noBtn = document.getElementById("no-btn"); deleteBtn.addEventListener("click", () => { popup.style.display = "block"; overlay.classList.add("show"); }); deleteBtn2.addEventListener("click", () => { popup.style.display = "block"; overlay.classList.add("show"); }); deleteBtn3.addEventListener("click", () => { popup.style.display = "block"; overlay.classList.add("show"); }); noBtn.addEventListener("click", () => { popup.style.display = "none"; overlay.classList.remove("show"); });
button { padding: 0px 0px; border-radius: 0px; border: none; background-color: #1c87c9; color: #fff; font-size: 16px; } .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 5px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); z-index: 9999; display: none; } .popup__content { display: flex; flex-direction: column; align-items: center; } .popup__title { margin: 0 0 20px; font-size: 18px; font-weight: 600; text-align: center; } .popup__button { padding: 15px 60px; border-radius: 5px; border: none; background-color: #1c87c9; color: #fff; font-size: 16px; cursor: pointer; }
Results:
Модальное окно
Назад