In this article you'll learn how to close div or detect that the click is outside the particular div. So, the goal is to close the div or change the style of div when user click outside of it using HTML, CSS and JavaScript.
Close Div By Clicking Outside of it.
Create a basic structure of html and add div tag with class name box. We'll position it in the centre.
HTML
<!DOCTYPE html>
<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>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 200px;
height: 200px;
background: linear-gradient(45deg, #6b2fc8, #ae329d);
padding: 20px 30px;
border-radius: 20px;
box-shadow: 0px 4px 30px -10px rgb(0 0 0);
}
Output :
Here the box is ready now, let's hide it on click outside of it.
We'll hide it using JavaScript. Its simple we just detect that, is click is happen on the div (class="box") or not. using contains() method of JavaScript.
JavaScript
let box = document.querySelector('.box');
document.onclick = function(e){
if(box.contains(e.target)){
}else{
box.style.display = 'none';
}
}
So, I've added onclick event to document that check, event triggered in class name box or not. If not then if condition else part will run making box to hide by css property display: none; .
You can also write like this.
JavaScript
let box = document.querySelector('.box');
document.onclick = function(e){
if(!box.contains(e.target)){
box.style.display = 'none';
}
}
I have used contains() method. So, contains () method can be used to check that is element contains inside another element or not. It returns true or false.
Let's understand contains() method with example:
So here below I have added the div with class name box and nested p tag with class name paragraph.
And we'll check that, is element with class box contains the element with class paragraph or not.
HTML
<!DOCTYPE html>
<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>
</head>
<body>
<div class="box">
<p class="paragraph"></p>
</div>
</body>
</html>
JavaScript
<script>
let box = document.querySelector('.box');
let paragraph = document.querySelector('.paragraph');
console.log(box.contains(paragraph))
</script>
Output :
%20method%20javascript%20.png)
As you can see the console above, that class paragraph is in the box class so it gives output true.
Now let's shift out the paragraph from box class.
HTML
<!DOCTYPE html>
<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>
</head>
<body>
<div class="box">
</div>
<p class="paragraph"></p>
</body>
</html>
JavaScript
<script>
let box = document.querySelector('.box');
let paragraph = document.querySelector('.paragraph');
console.log(box.contains(paragraph))
</script>
Output :
%20method%20javascript.png)
See it return false. Because paragraph class is not inside the box class. Now I hope you understand how to use contains() method to check element contains another element or not based on true and false. And also learn how to close or hide div when click outside of it.
So that's it. If you have any question or suggestion, feel free to write them in the comment section.
You may like:
- How to close sidebar menu when click outside of it using HTML, CSS & JavaScript.
- How to create sidebar menu that show and hide on click using only HTML & CSS.
- How to create a simple pop up box using JavaScript.
- How to create pop up box that hides when click outside of it using JavaScript.
- How to create automatic login and registration form pop up on page load using HTML, CSS & JavaScript.
Share your thoughts.