Реализация открытия модального окна для пяти отдельных кнопок

Question

Нужна помощь в реализации открытия мод. окна для пяти отдельных кнопок, чтобы при нажатии на одну из кнопок открывалось только своё окно. Возможно ли такая опция для данного кода? Спасибо.

var b = document.getElementById('overlay');

function swa() {
  b.style.visibility = 'visible';
  b.style.opacity = '1';
  b.style.transition = 'all 0.7s ease-out 0s';
}

function swa2() {
  b.style.visibility = 'hidden';
  b.style.opacity = '0';
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.7s ease-in 0s;
}

.popup {
  top: 10%;
  left: 0;
  right: 0;
  font-size: 14px;
  margin: auto;
  width: 80%;
  min-width: 200px;
  max-width: 600px;
  position: absolute;
  padding: 15px 20px;
  border: 1px solid #666;
  background-color: #fefefe;
  z-index: 1000;
  border-radius: 10px;
  font: 14px/18px 'Tahoma', Arial, sans-serif;
  box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
}

.close {
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  position: absolute;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 130, 230, 0.9);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  outline: none;
}

.close:before {
  color: rgba(255, 255, 255, 0.9);
  content: "X";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}

.close:hover {
  background-color: rgba(180, 20, 14, 0.8);
}

#overlay .popup p.zag {
  margin: 20px 0 10px;
  padding: 0 0 6px;
  color: tomato;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid tomato;
}

<div id="overlay">
  <div class="popup">
    <button class="close" title="Закрыть окно" onclick="swa2()"></button>
    <p class="zag">Модальное окно</p>
    <p>Первая текстовая информация ...</p>
    <p>Вторая текстовая информация ...</p>
    <p>Последующая текстовая информация ...</p>
  </div>
</div>

<button onclick="swa()" type="button">Модальное окно</button>

Answer 1

/* Сразу найдем все диалоги на странице */
document.querySelectorAll('dialog').forEach(dialog=>{
  /* В каждом диалоге найдем последнюю кнопку 
     (в примере каждый диалог имеет единственную кнопку,
      но в реальности вы можете добавить своих).
     Пропишем обработчик onclick у кнопки на функцию closeDialog().  */
  dialog.querySelector('button:last-child').onclick=closeDialog;
  /* По аналогии сделаем с ссылкой из заголовка */
  dialog.querySelector('h3 a').onclick=closeDialog;
});

/* Функция closeDialog() закрывает диалог.
   А какой именно диалог - берётся из аргумента event */
function closeDialog(event){
  /* Сам аргумент event передаётся данной функции как обработчику 
     события click. 
     Соответственно, event.target указывает на элемент, по которому
     кликнули.
     Метод closest() ищет ближайший родитель - диалог.
     И у этого диалога вызываем метод close(). */
  event.target.closest('dialog').close();
}

/* Функция openDialog() открывает диалог.
   А какой именно диалог - передаётся в единственном аргументе функции */
function openDialog(dialog){
  /* если есть метод showModal, вызываем его, 
     или вызываем show() в противном случае */
  dialog[dialog.showModal?'showModal':'show']();
}

  dialog h3 {
    /* заголовок прижат к правому краю, чтобы красная кнопка закрытия
       была справа. Это не обязательно, но если вы измените заголовок,
       то придется как-то по-другому выровнять красную кнопку */
    text-align: right;
  }

  /* стиль красной кнопки закрытия диалога */
  dialog h3 a:first-child {
      /* Позиция fixed вытянет кнопку выше диалога */
      position: fixed;
      z-index:3;
      background: #f00;
      color: #fff;
      font-size: 20pt;
      line-height: 16pt;
      font-weight: bold;
      text-decoration:none;
      border-radius: 100%;
      padding: 0 2px 2px 2px;
      /* небольшое смещение кнопки (при изменении размера диалога, 
         возможно будет требоваться корректировка смещения) */
      transform: translate(.4rem, -3rem);
      box-shadow: 0 0 .1rem #000;
    }
    /* стиль красной кнопки закрытия диалога 
       при наведении на него мышью */
    dialog h3 a:hover {
      box-shadow: 0 0 .5rem #ff0;
      color: #ff0;
    }

<div id="panel">
<button onclick="openDialog(dialog1)">Btn1</button>
<button onclick="openDialog(dialog2)">Btn2</button>
<button onclick="openDialog(dialog3)">Btn3</button>
<button onclick="openDialog(dialog4)">Btn4</button>        
<button onclick="openDialog(dialog5)">Btn5</button>
</div>
<dialog id="dialog1">
  <h3> Своё окно 1 <a href="#">⊗</a></h3>
  <div> <button>close</button> </div>
</dialog>
<dialog id="dialog2">
  <h3> Своё окно 2 <a href="#">⊗</a></h3>
  <div> <button>close</button> </div>
</dialog>
<dialog id="dialog3">
  <h3> Своё окно 3 <a href="#">⊗</a></h3>
  <div> <button>close</button> </div>
</dialog>
<dialog id="dialog4">
  <h3> Своё окно 4 <a href="#">⊗</a></h3>
  <div> <button>close</button> </div>
</dialog>
<dialog id="dialog5">
  <h3> Своё окно 5 <a href="#">⊗</a></h3>
  <div> <button>close</button> </div>
</dialog>

БЛОГ НА HUSL

Реализация открытия модального окна для пяти отдельных кнопок

Ответы (1 шт):