I used some random tutorial to add popup 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 id close to a div outside popup but it closes the popup when clicked inside the popup also, Can i get some help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<a class="show-cta" id="open" href="javascript:void(0)">Show</a>
<!-- model popup start -->
<div class="modal-container" id="modalContainer">
<div class="modal">
</div>
</div>
</body>
</html>
basic model popup css
<style>
a.show-cta{
background-color: #ea1420;
color: #fff;
padding: 6px 15px;
display: inline-block;
border-radius: 0;
text-transform: uppercase;
font-weight: 550;
font-size: 16px;
margin-top: 15px;
text-decoration: none;
}
.modal-container{
background-color: rgba(0, 0, 0, .3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
pointer-events: none;
opacity: 0;
}
.modal-container.show{
pointer-events: auto;
opacity: 1;
}
.modal{
background-color: #fff;
width: 85rem;
height: 470px;
box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .2);
}
</style>
How to remove class 'show' by clicking outside popup.
<script>
window.onclick=function(){
const open = document.getElementById('open');
const modalContainer = document.getElementById('modalContainer');
const close = document.getElementById('close');
```
open.addEventListener('click', () => {
modalContainer.classList.add('show');
});
close.addEventListener('click', () => {
modalContainer.classList.remove('show');
});
}
</script>