@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";
    }
  }
  • Вопрос задан
  • 636 просмотров
Решения вопроса 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";
    }
  }


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

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

Войти через центр авторизации
Похожие вопросы