btnPop.forEach(btn => {
if (e.target == btn) {
let getAttributePopUp = btn.getAttribute('data-trigger');
let popup = document.querySelector(`[data-popup='${getAttributePopUp}']`)
popup ? popup.classList.add('active') : null
}
})
document.addEventListener('click', function (e) {
let btnPop = document.querySelectorAll('[data-trigger]')
let allPopUps = document.querySelectorAll('.popup');
if (!e.target.closest('.popup-wrapper') || e.target.closest('.close-btn')) {
allPopUps.forEach(pop => {
pop.classList.remove('active')
})
}
btnPop.forEach(btn => {
if (e.target != btn) return
let popup = document.querySelector(`[data-popup='${btn.dataset.trigger}']`)
popup ? popup.classList.add('active') : null
})
})
let activePopup;
btnPop.forEach( (btn) => {
btn.onclick = _ => {
const popup = document.querySelector(`.popupType.${btn.dataset.popup}`)
if(popup) {
popup.classList.add("active")
activePopup = popup
}
}
})
function delPopUp () {
activePopup.classList.remove("active")
}
const component = ({html,indicator}) => {
const dom = new DOMParser().parseFromString(html, "text/html");
return dom.querySelector(indicator)
}
const popups = {
popupError : (text) => component({
indicator: ".popup",
html:`
<div class="popup error">
<div class="popu__wrapper">
${text}
</div>
</div>
`
}),
popupSomthing:(text) => component({
indicator: ".popup",
html:`
<div class="popup something">
<div class="popu__wrapper">
${text}
..............
</div>
</div>
`
})
}
btnPop.forEach( (btn,i) => {
btn.onclick = _ => {
popupParent.append(popups[btn.dataset.popupType]("data"))
}
})
//добавить кнопку в компоненте
<button onclick="delPopup();"> del <button/>
function delPopup() {
parentPopup.children[0].remove()
}