Ребята, как реализовать popup js?

Question

[K_Aleksey]

Ребята нужна помощь, есть на странице кнопки(рис) при клике на них появляется popup.

Вот код того что у меня получилось, в js не силен, только учу:
html :

<button id="popup-loot01" class="loot-btn">Book Now</button>
<div id="popup-loot01" class="popup_loot"></div>

<button id="popup-loot02" class="loot-btn">Book Now</button>
<div id="popup-loot02" class="popup_loot loot2">

<button id="popup-loot03" class="loot-btn">Book Now</button>
<div id="popup-loot03" class="popup_loot loot3">

js:

(function popUp() {
	var btnPopup = document.querySelectorAll('.loot-btn');

	Array.prototype.forEach.call(btnPopup, function(e){
		e.onclick = function(ev){
		ev.preventDefault();
		this.nextElementSibling.classList.toggle('show');
		}
	});
})();

При нажатии появляется, но при нажатии на другую кнопку появляется новый popup, а предыдущий popup не скрывается. Подскажите пожалуйста как это можно реализовать?

Answer 1

[GreatRash]

Да и в HTML не силён. ID должен быть уникальным.

Comments

[K_Aleksey]

не досмотрел, спасибо

[GreatRash]

K_Aleksey: советую использовать data-атрибуты, для линковки элементов.

<button data-id="popup-loot01" class="loot-btn">Book Now</button>
<div data-id="popup-loot01" class="popup_loot"></div>

[K_Aleksey]

GreatRash: спасибо

Answer 2

[Robert Bl]

Сделайте два метода. Тот который будет закрывать и открывать. И вызывайте их по ситуации.

Comments

[K_Aleksey]

спасибо

Answer 3

[Максим Верховный]

а с помощью плагина magnificPopup не вариант реализовать?