Close Modal when clicked on other div
Question
So i don't have a clue how to work this out. I want to have it work like so: If you click on one paw the modal opens and if you click on the second paw the modal of paw 1 closes. What do i have to add to the script to make it work? Right now the modal opens in th ebackground of the curretn active modal.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.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);
}
</style>
</head>
<body>
<!--Pfote 1 Start-->
<div class="item one">
<div id="overlay"></div>
<input type="image" data-modal-target="#info1" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
<div id="info1" class="infobox eins">
<div class="title">
<h3 class="infoheadline">3.500 mal tierischer</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel, Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...</p>
</div>
</div>
<!--Pfote 1 Ende-->
<!--Pfote 2 Start-->
<div class="item two">
<div id="overlay"></div>
<input type="image" data-modal-target="#info2" src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png" alt="Pfote" class="paw">
<div id="info2" class="infobox zwei">
<div class="title">
<h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).</p>
</div>
</div>
<!--Pfote 2 Ende-->
<script type="text/javascript">
//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')
}
</script>
</body>
</html>```
2 answers
solution1
2 ACCPTED 2022-06-29 10:11:10
I think you tried to overcomplicate the stuff. Here's a modified version of your code that behaves as expected:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.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, 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);
}
</style>
</head>
<body>
<div id="overlay"></div>
<!--Pfote 1 Start-->
<div class="item one">
<input
type="image"
data-modal-target="#info1"
src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
alt="Pfote"
class="paw"
/>
<div id="info1" class="infobox eins">
<div class="title">
<h3 class="infoheadline">3.500 mal tierischer</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">
Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel,
Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...
</p>
</div>
</div>
<!--Pfote 1 Ende-->
<!--Pfote 2 Start-->
<div class="item two">
<input
type="image"
data-modal-target="#info2"
src="https://media.visioneleven.com/JW/116_Nachhaltigkeit_Wiesen/image_assets/paw.png"
alt="Pfote"
class="paw"
/>
<div id="info2" class="infobox zwei">
<div class="title">
<h3 class="infoheadline">588 Mrd. mal klimafreundlicher</h3>
<button data-close-button class="close-button">×</button>
</div>
<div class="linesmall"></div>
<p class="infotext">
Allein in Deutschland speichern Wiesen ca. 588 Milliarden Tonnen
CO<sub>2</sub> – und entziehen sie damit der Atmosphäre. (Zum
Vergleich: Unsere Wälder speichern ca. 372 Mrd. t).
</p>
</div>
</div>
<!--Pfote 2 Ende-->
<script type="text/javascript">
//Start Modal One
const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll(
"[data-close-button]"
);
const overlay = document.querySelector("#overlay");
const closeActiveModals = () => {
const info = document.querySelectorAll(".infobox.active");
info.forEach((info) => {
closeModal(info);
});
};
openModalButtons.forEach((button) => {
button.addEventListener("click", () => {
closeActiveModals();
const info = document.querySelector(button.dataset.modalTarget);
openModal(info);
});
});
overlay.addEventListener("click", closeActiveModals);
closeModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const info = button.closest(".infobox");
closeModal(info);
});
});
function openModal(info) {
if (info == null) return;
info.classList.add("active");
overlay.classList.add("active");
}
function closeModal(info) {
if (info == null) return;
info.classList.remove("active");
overlay.classList.remove("active");
}
</script>
</body>
</html>
Note that you don't need to add event listeners twice as you're querying the DOM with querySelectorAll and then iterating through them to add event listeners. Also, for the same exact reason, you don't need to add all of the functions such as openModal twice neither.
Just don't try to make it complicated. It's very simple.
solution2
-1 2022-06-29 09:28:13
简单的解决方案处理覆盖上的点击事件，并停止从模态本身传播点击事件
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Close other div when new is clicked
Close active div when other show / hide div buttons clicked
Modal does not close, when clicked
Close a modal when the body is clicked
MVC Close Modal when DataTable Row is clicked
jquery when clicked outside the div close the div
Bootstrap modal - close modal when “call to action” button is clicked
Launch modal when div rectangle clicked
Onclick popup div close when clicked outside of it
Close popup div when clicked outside it
Related Tags