Close Popup By Clicking Outside It Javascript
I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one. I've tried adding an invisibleDiv
Solution 1:
Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:
const popups = [...document.getElementsByClassName('popup')];
window.addEventListener('click', ({ target }) => {
const popup = target.closest('.popup');
const clickedOnClosedPopup = popup && !popup.classList.contains('show');
popups.forEach(p => p.classList.remove('show'));
if (clickedOnClosedPopup) popup.classList.add('show');
});
/* Popup container - can be anything you want */.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */.popup.popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */.popup.popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */.popup.show.popuptext {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<h2>Popup</h2><divclass="popup">Click me to toggle the popup!
<spanclass="popuptext">A Simple Popup!</span></div><divclass="popup">Click me to toggle the popup!
<spanclass="popuptext">A Simple Popup!</span></div>
Solution 2:
Add an onclick to the popup's container and stop event propagation on all internal elements you don't want to trigger the action.
let popup = document.querySelector(".popup");
functiontoggle(e) {
e.stopPropagation();
popup.classList.toggle("hide");
}
functionclosePopup() {
if (!popup.classList.contains("hide")) {
popup.classList.toggle("hide");
}
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightgray;
display: flex;
flex-direction: column;
justify-content: center;
}
.popup {
width: 100px;
height: 100px;
background: white;
margin: 0 auto;
}
button {
position: fixed;
top: 0;
}
.hide {
display: none;
}
<divclass="container"onclick="closePopup()"><divclass="popup hide"onclick="event.stopPropagation()"></div><Buttononclick="toggle(event)">Toggle</Button></div>
Post a Comment for "Close Popup By Clicking Outside It Javascript"