Закрыть модальное окно при нажатии на другой div ⇐ CSS

[Anonymous]

Я хочу, чтобы это работало так: если вы нажмете на одну лапу, откроется модальное окно, а если вы нажмете на вторую лапу, модальное окно лапы 1 закроется. Что мне нужно добавить в скрипт, чтобы он заработал? Прямо сейчас модальное окно открывается на фоне текущего активного модального окна.

Код: Выделить всё

//Start Modal One
const openModalButtonOne = document.querySelectorAll('[data-modal-target]')
const closeModalButtonOne = document.querySelectorAll('[data-close-button]')
const overlayOne = document.getElementById('overlay')

openModalButtonOne.forEach(button => {
button.addEventListener('click', () => {
const info1 = document.querySelector(button.dataset.modalTarget)
openModal(info1)
})
})

overlayOne.addEventListener('click', () => {
const info1 = document.querySelectorAll('.infobox.active')
info1.forEach(info1 => {
closeModal(info1)
})
})

closeModalButtonOne.forEach(button => {
button.addEventListener('click', () => {
const info1 = button.closest('.infobox')
closeModal(info1)
})
})

function openModal(info1) {
if (info1 == null) return
info1.classList.add('active')
overlayOne.classList.add('active')
}

function closeModal(info1) {
if (info1 == null) return
info1.classList.remove('active')
overlayOne.classList.remove('active')
}

//Start Modal Two
const openModalButtonTwo = document.querySelectorAll('[data-modal-target]')
const closeModalButtonTwo = document.querySelectorAll('[data-close-button]')
const overlayTwo = document.getElementById('overlay')

openModalButtonTwo.forEach(button => {
button.addEventListener('click', () => {
const info2 = document.querySelector(button.dataset.modalTarget)
openModal(info2)
})
})

overlayTwo.addEventListener('click', () => {
const info2 = document.querySelectorAll('.infobox.active')
info2.forEach(info2 => {
closeModal(info2)
})
})

closeModalButtonTwo.forEach(button => {
button.addEventListener('click', () =>  {
const info2 = button.closest('.infobox')
closeModal(info2)
})
})

function openModal(info2) {
if (info2 == null) return
info2.classList.add('active')
overlayTwo.classList.add('active')
}

function closeModal(info2) {
if (info2 == null) return
info2.classList.remove('active')
overlayTwo.classList.remove('active')
}

Код: Выделить всё

.infobox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
z-index: 200;
background-color: #D0D0CE;
width: 500px;
max-width: 80%;
}

.infobox.active {
transform: translate(-50%, -50%) scale(1);
}

#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
pointer-events: none;
}

#overlay.active {
opacity: 1;
pointer-events: all;
}

.title {
padding: 0 10px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}

.infoheadline {
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
padding-left: 5px;
}

.infotext {
padding: 10px 15px;
font-family: 'Roboto', sans-serif;
}

.linesmall {
width: 20%;
height: 5px;
margin-left: 10px;
background-color: #FABB00;
}

.paw {
width: 42px;
height: 42px;
padding: 16px;
z-index: 1;
filter: drop-shadow(0px 0px 5px #ffffff);
}

Код: Выделить всё

3.500 mal tierischer
×

Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel, Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...










588 Mrd. mal klimafreundlicher
×

Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen CO2 – und entziehen sie damit der Atmosphäre. (Zum Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).

Подробнее здесь: https://stackoverflow.com/questions/727 ... -other-div