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

Question

[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";
    }
  }

Comments

[Andrew]

Сейчас вы берёте по одному элементу открытия и закрытия,
вам нужно:
1. Взять все элементы(лучше через querySelectorAll());
2. forEach'ом повесить на них обработчики(onClick)
Profit

[losos_lapolosos]

Andrew, Ну я так и подумал, что тут querySelectorAll. Но я не знаю как это написать. Можете, пожалуйста, помочь?

[Andrew]

losos_lapolosos, загуглите необходимый метод, в консоль выведите что он вам вернёт, мучайтесь пока не вернёт все кнопки одного и другого класса, дальше - дело пары минут

Answer 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";
    }
  }

Как то так

Comments

[losos_lapolosos]

Спасибо!!!