@losos_lapolosos

Как сделать так, чтобы при нажатии на разные кнопки открывалось одо модальное окно?

Здравствуйте, у меня есть восемь кнопок, на них я хочу повесить открытие модального окна, но работает оно только на одной кнопке. Скорее всего надо делать через querrySelectorAll, но я не понимаю как.
html кнопок:
<div class="products">
				<div class="product">
					<img src="img/pled1.png" alt="">

					<h3>Плед с длинным ворсом капучино 220*240 см</h3>

					<p class="discription">Размер: 220х240 см. <br>
					Вес покрывала: 2.300гр <br>
					Длина ворса: верх 3-4 см, нижняя сторона –велсофт (микрофибра) <br>
					Упаковка: ПВХ-сумка на молнии.</p>

					<p class="price">1 590 руб. <span class="no">3 550 руб.</span></p>

					<p class="sale">Экономия: 1 960 руб. (55%)</p>

					<a class="btn_modal_window">Заказать</a>
				</div>
				<div class="product">
					<img src="img/pled2.png" alt="">

					<h3>Плед с длинным ворсом молочный 220*240 см</h3>

					<p class="discription">Размер: 220х240 см. <br>
					Вес покрывала: 2.300гр <br>
					Длина ворса: верх 3-4 см, нижняя сторона –велсофт (микрофибра) <br>
					Упаковка: ПВХ-сумка на молнии.</p>

					<p class="price">1 590 руб. <span class="no">3 550 руб.</span></p>

					<p class="sale">Экономия: 1 960 руб. (55%)</p>

					<a class="btn_modal_window">Заказать</a>
				</div>
			</div>


html модального окна:
<div id="my_modal" class="modal">
    	<div class="modal_content">
     		<span class="close_modal_window">×</span>
      		<p>Модальное окно!</p>
    	</div>
  	</div>


js:
let modal = document.getElementById("my_modal");
  let span = document.getElementsByClassName("close_modal_window")[0];
  let btn = document.getElementsByClassName("btn_modal_window")[0];

  btn.onclick = function (){
        modal.style.display = "block";
  }

  span.onclick = function () {
    modal.style.display = "none";
  }

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
@Vaultboy84
let modal = document.getElementById("my_modal");
let span = document.getElementsByClassName("close_modal_window")[0];

let allBtn = document.querySelectorAll('.btn_modal_window'); /* Берем все кнопки */
allBtn.forEach(function(element) {
    element.onclick = showModal;
})

function showModal() {
    modal.style.display = "block"; /* Выводим модальное окно */
}

span.onclick = function () {
    modal.style.display = "none";
  }

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }


Как то так
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
NetLab Москва
от 35 000 до 50 000 руб.
Apptech Санкт-Петербург
от 30 000 до 70 000 руб.
07 дек. 2019, в 18:02
2000 руб./за проект
07 дек. 2019, в 17:26
400 руб./в час
07 дек. 2019, в 17:09
1000 руб./за проект