Как через JavaScript выводить всплывающие окна на сайт?
Здравствуйте, у меня возник достаточно сложный вопрос, с которым давно не могу справиться. Дело в том, что у меня на сайте много карточек с услугами. Все карточки я перенес в JavaScript обьект для оптимизации сайта, сделал вывод этих карточек на сайт. Под каждой карточкой есть кнопка 'читать больше' при нажатии на нее должно всплывать окно примерно такой структуры:
<div class="popup__bg2"> <div class="popup2"> <button id="close-popup2"><img src="/images/close.png" alt=""></button> <!-- Разметка слайдера (html код) --> <img style="border-radius: 25px;" src="https://sun9-west.userapi.com/sun9-69/s/v1/ig2/42_Y-LZ88MrqxfyEM8EC3Gi09V_etYlG8v0gxE7lXWMTIbpuW6MmP6Sum9yVnV__BucwUDkLDqoQjW5Wo0O89gSt.jpg?size=807x538&quality=96&type=none" alt=""> <h2 class=" u-text u-text-default u-text-1">Аренда бани</h2> <p class="u-text u-text-2">Цена 1 000–1 200 ₽ / час</p> <p class="u-text u-text-2">от 6 до 12 чел : дровяная парилка ,бассейн с подогревом, комната отдыха , оборудованная мини кухня, зал со столом , мангал.</p> <button id="close" class="u-active-none u-border-2 u-border-hover-palette-2-base u-border-no-left u-border-no-right u-border-no-top u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-2"><a href="https://vk.com/im?media=&sel=-32989505">Записаться</a></button> </div> </div> |
<div class="popup__bg2"> <div class="popup2"> <button id="close-popup2"><img src="/images/close.png" alt=""></button> <!-- Разметка слайдера (html код) --> <img style="border-radius: 25px;" src="https://sun9-west.userapi.com/sun9-69/s/v1/ig2/42_Y-LZ88MrqxfyEM8EC3Gi09V_etYlG8v0gxE7lXWMTIbpuW6MmP6Sum9yVnV__BucwUDkLDqoQjW5Wo0O89gSt.jpg?size=807x538&quality=96&type=none" alt=""> <h2 class=" u-text u-text-default u-text-1">Аренда бани</h2> <p class="u-text u-text-2">Цена 1 000–1 200 ₽ / час</p> <p class="u-text u-text-2">от 6 до 12 чел : дровяная парилка ,бассейн с подогревом, комната отдыха , оборудованная мини кухня, зал со столом , мангал.</p> <button id="close" class="u-active-none u-border-2 u-border-hover-palette-2-base u-border-no-left u-border-no-right u-border-no-top u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-2"><a href="https://vk.com/im?media=&sel=-32989505">Записаться</a></button> </div> </div>
Скрипт для открытия окна :
let popupBg2 = document.querySelector('.popup__bg2'); // Фон попап окна let popup2 = document.querySelector('.popup2'); // Само окно let openPopupButtons2 = document.querySelectorAll('#popupOpen2'); // Кнопки для показа окна let closePopupButton2 = document.querySelector('#close-popup2'); // Кнопка для скрытия окна openPopupButtons2.forEach((button) => { // Перебираем все кнопки button.addEventListener('click', (e) => { // Для каждой вешаем обработчик событий на клик e.preventDefault(); // Предотвращаем дефолтное поведение браузера popupBg2.classList.add('active'); // Добавляем класс 'active' для фона popup2.classList.add('active'); // И для самого окна }) }); closePopupButton2.addEventListener('click',() => { // Вешаем обработчик на крестик popupBg2.classList.remove('active'); // Убираем активный класс с фона popup2.classList.remove('active'); // И с окна }); document.addEventListener('click', (e) => { // Вешаем обработчик на весь документ if(e.target === popupBg2) { // Если цель клика - фот, то: popupBg2.classList.remove('active'); // Убираем активный класс с фона popup2.classList.remove('active'); // И с окна } }); |
let popupBg2 = document.querySelector('.popup__bg2'); // Фон попап окна let popup2 = document.querySelector('.popup2'); // Само окно let openPopupButtons2 = document.querySelectorAll('#popupOpen2'); // Кнопки для показа окна let closePopupButton2 = document.querySelector('#close-popup2'); // Кнопка для скрытия окна openPopupButtons2.forEach((button) => { // Перебираем все кнопки button.addEventListener('click', (e) => { // Для каждой вешаем обработчик событий на клик e.preventDefault(); // Предотвращаем дефолтное поведение браузера popupBg2.classList.add('active'); // Добавляем класс 'active' для фона popup2.classList.add('active'); // И для самого окна }) }); closePopupButton2.addEventListener('click',() => { // Вешаем обработчик на крестик popupBg2.classList.remove('active'); // Убираем активный класс с фона popup2.classList.remove('active'); // И с окна }); document.addEventListener('click', (e) => { // Вешаем обработчик на весь документ if(e.target === popupBg2) { // Если цель клика - фот, то: popupBg2.classList.remove('active'); // Убираем активный класс с фона popup2.classList.remove('active'); // И с окна } });
Все классы окон хранятся в обьекте :
{ title: 'Арендовать домик', price: '14 000 - 18 000 руб', desc: 'desc', image: 'images/Domiki.png', popup_open: 'popupOpen1', // кнопка открытия окна popup: 'popup', // класс окна popup_bg: 'popup__bg', // класс окна id: '1' }, |
{ title: 'Арендовать домик', price: '14 000 - 18 000 руб', desc: 'desc', image: 'images/Domiki.png', popup_open: 'popupOpen1', // кнопка открытия окна popup: 'popup', // класс окна popup_bg: 'popup__bg', // класс окна id: '1' },
Мне нужно как то перебрать обьект и для каждой кнопки по нажатию сделать свое окно. Помогите пожалуйста с решением. Если нужно то вот способ, как я вывел карточки на сайт :
Когда я попытался таким же путем вывести окна из обьекта, то они все сразу вывелись при нажатии на кнопку...
Я думаю вы понимаете о чем я.
items.forEach(item => { data += ` <div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-${item.id}" data-animation-name="" data-animation-duration="0" data-animation-direction="">` data += ` <div class="u-container-layout u-similar-container u-valign-top-xs u-container-layout-${item.id}">` data += ` <img alt="" class="u-expanded-width u-image u-image-default u-image-${item.id}" data-image-width="368" data-image-height="374" src="${item.image}" data-animation-name="customAnimationIn" data-animation-duration="1000" data-animation-delay="0" data-animation-direction="">` data += ` <h3 class="u-text u-text-default u-text-1">${item.title}</h3>` data += ` <p class="u-text u-text-2">${item.price}</p>` data += ` <a href="" id="${item.popup_open}" class="u-active-none u-border-2 u-border-hover-palette-2-base u-border-no-left u-border-no-right u-border-no-top u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Читать больше</a>` data += ` </div>` data += ` </div>` }) list.innerHTML = data |
items.forEach(item => { data += ` <div class="u-container-style u-hover-feature u-list-item u-repeater-item u-list-item-${item.id}" data-animation-name="" data-animation-duration="0" data-animation-direction="">` data += ` <div class="u-container-layout u-similar-container u-valign-top-xs u-container-layout-${item.id}">` data += ` <img alt="" class="u-expanded-width u-image u-image-default u-image-${item.id}" data-image-width="368" data-image-height="374" src="${item.image}" data-animation-name="customAnimationIn" data-animation-duration="1000" data-animation-delay="0" data-animation-direction="">` data += ` <h3 class="u-text u-text-default u-text-1">${item.title}</h3>` data += ` <p class="u-text u-text-2">${item.price}</p>` data += ` <a href="" id="${item.popup_open}" class="u-active-none u-border-2 u-border-hover-palette-2-base u-border-no-left u-border-no-right u-border-no-top u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Читать больше</a>` data += ` </div>` data += ` </div>` }) list.innerHTML = data
Дополнительно:
https://learn.javascript.ru/template-element
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
Ответы:
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для вывода всплывающих окон на сайт с помощью JavaScript можно использовать метод `alert()` для вывода простого информационного сообщения или `confirm()` для вывода диалогового окна с вопросом и кнопками "ОК" и "Отмена".
Пример использования метода `alert()`:
```html
function showAlert() {
alert("Привет, это всплывающее окно!");
}
```
Пример использования метода `confirm()`:
```html
function showConfirm() {
var result = confirm("Вы уверены, что хотите продолжить?");
if (result) {
alert("Вы нажали ОК!");
} else {
alert("Вы нажали Отмена!");
}
}
```
Также можно создавать кастомные всплывающие окна с помощью HTML, CSS и JavaScript. Например, можно создать модальное окно, которое появляется поверх контента сайта и блокирует взаимодействие с ним, пока окно не будет закрыто.
Пример создания модального окна:
```html
Текст модального окна здесь
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
function showModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
```
Таким образом, вы можете использовать различные методы для вывода всплывающих окон на вашем сайте с помощью JavaScript в зависимости от ваших потребностей и дизайнерских предпочтений. Надеюсь, это решит вашу проблему!