Hi: Here, I am trying to open an overlay window, then, close the window outside the window as well. That I have seen possible in some websites. As soon as I take out // in closeNav() in my last section, the window doesn't open. Thanks for your helps.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
margin: 0;
}
.sidenav {
height: 72%;
width: 0;
position: fixed;
top: 0;
right:0;
scroll-margin-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;
}
#container{
display: flex;
padding: 0px 0px 0px 0px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 0px;}
.sidenav a {font-size: 60px;}
}
</style>
</head>
<body>
<div id="mySidenav">
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" id="closebtn" class="closebtn" onclick="closeNav()"> ×</a>
<a href="xx.html"> Mission</a>
<a href="#">Services</a>
</div>
</div>
<div id="BodyTexts">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">
☰Menu</span>
<p>Learning javascript aa</p>
</div>
<script>
// var sidenav = document.getElementById("sidenav");
var OStatus;
function openNav() {
document.getElementById("sidenav").style.width = "30%";
OStatus = "opened"
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
OStatus = " "
}
window.onclick = function(event) {
if ( OStatus = "opened" && event.target != sidenav ) {
// closeNav();
Ostatus = " "
}
}
</script>
</body>
</html>
Code: