Как настроить один попап на две кнопки

Question

Как настроить один попап на две кнопки

Рейтинг: 2Ответов: 1Опубликовано: 15.02.2023

Есть два попапа, которые должны открываться/закрываться при нажатии

В результате работает только один элемент.

Не пойму что делать?

//код для первого элемента

const button = document.querySelector('#pop-up-bag') 
const bag = document.querySelector('#pop-up-bag-container') 
const closePop = document.querySelector("#pop-up-bag-close");


document.addEventListener('DOMContentLoaded', () => { 

    button.addEventListener('click', () => { 
      bag.classList.toggle('open-pop') 
    })

    window.addEventListener('click', e => { 
      const target = e.target 
      if (!target.closest('#pop-up-bag-container') && !target.closest('#pop-up-bag') || target.closest('#pop-up-bag-close')) { 
        bag.classList.remove('open-pop'); 
      } 
    })
});


// код для второго элемента

const button1 = document.querySelector('#pop-up-like') 
const bag1 = document.querySelector('#pop-up-like-container') 
const closePop1 = document.querySelector("#pop-up-like-close");


document.addEventListener('DOMContentLoaded', () => { 

    button1.addEventListener('click', () => { 
      bag1.classList.add('open-pop') ;
    })

    window.addEventListener('click', e => { 
      const target1 = e.target 
      if (!target1.closest('#pop-up-like-container') && !target1.closest('#pop-up-like') || target1.closest('#pop-up-like-close')) { 
        bag1.classList.remove('open-pop'); 
      }
    })
});

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

function openPopup(name) {
  const popup = document.querySelector(`.popup[data-name="${name}"]`);
  if (!popup) return;

  popup.classList.add("open");
}

function closePopup(name) {
  const popup = document.querySelector(`.popup[data-name="${name}"]`);
  if (!popup) return;

  popup.classList.remove("open");
}

document.addEventListener("click", (event) => {
  const action = event.target.closest("[data-action]");
  if (!action) return;

  const actionName = action.getAttribute("data-action");
  if (!actionName) return;

  const popupName = action.getAttribute("data-name");
  if (!popupName);

  const actions = {
    "open-popup": openPopup,
    "close-popup": closePopup
  };

  actions[actionName]?.(popupName);
});

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 1);
}

.popup:not(.open) {
  display: none;
}

<div class="popup" data-name="popup1">
  <p>Popup1</p>
  <button data-action="close-popup" data-name="popup1">Close popup</button>
</div>
<div class="popup" data-name="popup2">
  <p>Popup2</p>
  <button data-action="close-popup" data-name="popup2">Close popup</button>
</div>

<button data-action="open-popup" data-name="popup1">Open popup with "popup1" name</button>
<button data-action="open-popup" data-name="popup1">Open popup with "popup1" name</button>
<button data-action="open-popup" data-name="popup2">Open popup with "popup2" name</button>

Как настроить один попап на две кнопки

Ответы