Hi: I have attached my code where it displays a overlay window upon clicking. But, it doesn't close on clicking outside that overlay window. Whereas, in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal it does. I might not be doing right something in the last three lines of JavaScript code. Thanks for your help.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#container{
display: flex;
padding: 0px 0px 0px 0px;
}
.sidenav {
height: 72%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #6a6c6d;
overflow-x: hidden;
transition: 0.5s;
padding-top:50px;
}
.sidenav a {
padding: 8px 8px 10px 15px;
text-decoration: none;
font-size: 16px;
color: black ;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 50px;
}
.sidenav .ptext {
padding: 0px 0px 0px 15px;
font-size: 16px;
color: black;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 0px;}
.sidenav a {font-size: 60px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"> ×</a>
<a href="#"> Mission</a>
<a href="#">Services</a>
</div>
<div id="header">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰Menu</span>
</div>
<div id="container">
<img class="owl1" src="bookkeepings.png" alt="" width="60" height="auto" alt="A "/>
<p></p>Learning JavaScript</p>
</div>
<script>
var sidenav = document.getElementById("mySidenav");
function openNav() {
document.getElementById("mySidenav").style.width = "30%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
window.onclick = function(event) {
if (event.target == sidenav) {
document.getElementById("mySidenav").style.width = "0";
}
}
</script>
</body>
</html>