Как правильно подключить попап для двух кнопок?

Question

[testtoster]

Есть попап, который подключается к кнопку по id. На сайте есть около 5 кнопок по клику на которые он должен всплывать. Скажите, как правильно реализовать это, чтобы каждый раз не приходилось в javascript создавать новую переменную и указывать id кнопки?

<a class="button" id="myBtn">Открыть</a>

var modal = document.getElementById('myModal');

var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");

var span = document.getElementsByClassName("close")[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";
    }
}

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

Всем заранее спасибо за ответы

Answer 1

[WapSter]

Использовать класс вместо id

Comments

[testtoster]

подскажите как правильно это сделать? Я еще новичок в js))

[WapSter]

testtoster,

var modal = document.getElementById('myModal');

var btn = document.querySelectorAll('.button')

var span = document.getElementsByClassName("close")[0];

btn.forEach(function(item){
  item.addEventListener('click', function(e){
    e.preventDefault()
    modal.style.display = "none";
  })
});

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

изменил немного ответ так вернее будет.

[nikomako]

Тимур Турсунбаев, Тимур, доброй ночи! После вашего ответа я вообще запутался))) Я очень новичок в js, а точнее полный 0. Пытаюсь реализовать данную концепцию модальных окон. Вы написали изменённый код, я его поставил место первого, теперь вообще не реагируют окна. До этого, всплывало одно и тоже окно. Мне как объявить своим div, где первое модальное, где второе.... Вообще запутался.... Помогите пожалуйста! Благодарю!