Несколько всплывающих окон по клику

173

03 февраля 2020, 18:10

На странице есть кнопка, которая открывает всплывающее окно

<dialog>
  <p>окно</p>
  <button id="close">Закрыть</button>
</dialog>
<button id="show">Открыть  окно!</button>

<script type = text/javascript>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};
</script>

Как можно продублировать кнопки и всплывающие окна? Чтобы контент в них был разный. Если просто продублировать код, то открывается только первое окно, остальные не реагируют

Answer 1

Можно как-то так, попап менеджер. Если нужно объяснение что тут происходит - дайте знать.

class PopupManager { 
  constructor() { 
    this.actions = { 
      "open-popup": "open", 
      "close-popup": "close" 
    }; 
 
    this.onDocumentClick = this.onDocumentClick.bind(this); 
 
    document.addEventListener("click", this.onDocumentClick, false); 
  } 
 
  isPopupOpen() { 
    return !!this.popupName; 
  } 
 
  closeActive() { 
    this.close(this.popupName); 
  } 
 
  onDocumentClick(event) { 
    const node = event.target.closest("[data-action]"); 
 
    if (event.target.closest(".popup__container") && !node) return; 
 
    if (!node && this.isPopupOpen()) { 
      return this.closeActive(); 
    } 
 
    if (!node) return 
 
    const name = node.getAttribute("data-name"); 
    const action = node.getAttribute("data-action"); 
 
    if (!action || !action || !this.actions[action]) return; 
 
    this[this.actions[action]](name); 
  } 
 
  open(name) { 
    const popup = document.querySelector(`.popup[data-name="${name}"]`); 
    popup.classList.add("popup_open"); 
    this.popupName = name; 
  } 
 
  close(name) { 
    const popup = document.querySelector(`.popup[data-name="${name}"]`); 
    popup.classList.remove("popup_open"); 
    this.popupName = null; 
  } 
} 
 
new PopupManager();

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
body { 
  font-size: 48px; 
} 
 
.popup { 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  background: rgba(17, 17, 17, 0.5); 
  transition: all .5s ease; 
  display: none; 
} 
 
.popup_open { 
  display: block; 
} 
 
.popup__container { 
  position: absolute; 
  max-width: 800px; 
  width: 100%; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%) scale(0.3); 
  transition: all 0.8s ease; 
}

<div class="popup-button" data-action="open-popup" data-name="popup-first">Popup #1</div> 
<div class="popup-button" data-action="open-popup" data-name="popup-two">Popup #2</div> 
 
<div class="popup" data-name="popup-first"> 
  <div class="popup__container"> 
    <div>POPUP #1</div> 
  </div> 
</div> 
 
<div class="popup" data-name="popup-two"> 
  <div class="popup__container"> 
    <div>POPUP #2</div> 
  </div> 
</div>