user13782016
Reputation:
how to make a modal disappear if it is clicked outside
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
@keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
pointer-events: none;
}<body>
<div id="overlay"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">×</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>From the above code if you click on the button it makes a modal appear by setting it's display to block, now what i want is that when you click outside the modal the modal will disappear, can anyone help with a code for that. i have tried
var modal = document.getElementById('modal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
but that doesn't work
i have checked other question on stack overflow about this but none of them work
Upvotes: 0
Views: 303
Answers (3)
AssGoblin69
Reputation: 832
Modals are pretty simple in nature. Most basic example would be consisting of modal itself, close button inside (or sometimes outside modal) and backdrop.
Now what you want to do is close modal whenever backdrop or close button is clicked. Now there is a design decision to be made, you can include modal inside a backdrop, or keep them on the same level in DOM. From your example I can see that you went with second option. In this case all you need to do is add onClick event to backdrop.
<div id="overlay" onclick="modalclose()"></div>
In case you would have modal inside backdrop you would additionally need to stop event propagation, because any click inside modal would trigger it's parents (including backdrop) onClick events.
var modalElement = document.getElementById('modal');
modalElement.addEventListener('click', function(event){
event.stopPropagation();
});
Upvotes: 0
Reyno
Reputation: 6505
You already have all the pieces, you just need to put it all together. Remove the pointer-events: none; from the overlay CSS so we can click on it. Then add the onclick="modalclose()" to your overlay. Thats it.
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
@keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}<body>
<div id="overlay" onclick="modalclose()"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">×</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>Upvotes: 1
Vahid Alimohamadi
Reputation: 5858
You can find where is the click happem, like this
window.addEventListener("click", function(e) {
if (document.getElementById("modalWindow").contains(e.target)) {
alert("clicked inside");
} else {
alert("clicked outside");
}
});
Upvotes: 0
Related Questions
- How to close modal when click outside Javascript
- Close custom modal when click outside the modal in vanilla JS
- Close Modal Upon Click Outside (CSS + HTML Only)
- Close/Hide Modal
- How can I prevent modal to show when i click on child element?
- Exit modal using css by clicking outside main box
- Close modal by clicking outside the box
- Close modal window when clicking outside or ESC
- Use jquery to hide custom modal when the user clicks outside of it
- Factorize javascript/jquery code for hiding modal when click outside