Как запустить несколько Pop Up на одной странице?

Question

[Алексей]

Всем привет!
Начинаю изучать JS и возникла необходимость на одной странице реализовать несколько однотипных Pop Up с разным контентом. Один Pop Up запустился и работает, но вот несколько сразу никак не хотят. Пытался реализовать, через подключение нескольких файлов к одной странице с изменением элементов атрибутов, но в этом случае, то почему-то выводится исключительно последний pop up, то оверлей зависнет, то pup up запускается сразу же. Одним словом, не получается у меня соединить на одной странице несколько pop up и все. Подскажите в чем может быть проблема, в чем я ошибаюсь? И как это лучше исправить.

<div class="content" id="btn-open-1">
  <h1>Скоро весна</h1>     
</div>                       
<div class="content" id="btn-open-2">
  <h1>Скоро лето</h1>
</div>
<div class="content" id="btn-open-3">
  <h1>Скоро осень</h1>
</div>
<div class="content" id="btn-open-4">
  <h1>Скоро зима</h1>
</div>

<!-- modal -->

<div id="wrapper-modal-1">
  <div id="overlay"></div>
  <div id="modal-window">
    <div class="content-pp">
      <h2> 
        Весна придет
      </h2>                           
   </div>
 </div>            
</div>
<!-- <div id="wrapper-modal-2">
  <div id="overlay"></div>
  <div id="modal-window">
    <div class="content-pp">
      <h3 class="modal__title" > 
        Лето придет
      </h3>                           
   </div>
 </div>            
</div>
<div id="wrapper-modal-3">
  <div id="overlay"></div>
  <div id="modal-window">
    <div class="content-pp">
      <h3 class="modal__title" > 
        Осень придет
      </h3>                           
   </div>
 </div>            
</div>
<div id="wrapper-modal-4">
  <div id="overlay"></div>
  <div id="modal-window">
    <div class="content-pp">
      <h3 class="modal__title" > 
        Зима придет
      </h3>                           
   </div>
 </div>            
</div> -->

#wrapper-modal-1 {
    width: 100%;
    height: 100%;
    display: none;
}
#wrapper-modal-1.active {
    display: block;
}

#overlay {
    position: fixed;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #76ec1542;
    
}

#modal-window {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    z-index: 2;
    border: 1px solid black;
    background-color: #fff;
    padding: 60px 48px;
}

var btnOpen = document.getElementById('btn-open-1');
var modal = document.getElementById('wrapper-modal-1');

var overlay = document.getElementById('overlay');
var btnClose = document.getElementById('btn-close');

btnOpen.addEventListener('click',function(){
    modal.classList.add('active');
});
 
function closeModal(){
    modal.classList.remove('active');
}

overlay.addEventListener('click',closeModal);

ссылка на codepen

Comments

[imko]

Недопустимо использовать одинаковые айди у элементов

[Алексей]

imko, Это я знаю, по этому и задаю им open-1, modal-1, overlay-1, open-2, modal-2, overlay-2, modal-window-2 и т.д. И я Хочу понять, как написать формулу, что бы это был один файл и в него можно было просто добавлять ID от всех Pop up которые необходимо вывести на экран по очереди

[imko]

Алексей, у тебя дублируется айди overlay
А для типовых элементов используй какой-нибудь общий класс и скриптом перебор их

Answer 1

[Mizutsune]

Если совсем немного подправить песочницу из вопроса, то можно сделать как-то так:



Но, в целом реализация модальных окон это не пара строчек кода, а намного больше и чтобы сделать хорошо, нужно потратить больше 5-ти минут времени. В любом случае, можно взять готовую библиотеку и посмотреть из чего она состоит. Это в некоторых случаях может помочь и возможно упростит создание своего велосипеда.