Hi:
I am opening a window and closing a window with style.width. I like to close the window with clicking on the body outside the window as well when the window is opened. In https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal it does. I am trying to achieve the same task using the last 5 lines of the JavaScript code. My little knowledge of JavaScript doesn't help. If you could help me, it is a great help. Thanks
I am opening a window and closing a window with style.width. I like to close the window with clicking on the body outside the window as well when the window is opened. In https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal it does. I am trying to achieve the same task using the last 5 lines of the JavaScript code. My little knowledge of JavaScript doesn't help. If you could help me, it is a great help. Thanks
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</p>
</div>
<script>
var BArea = document.getElementById("BodyTexts");
var WArea = document.getElementById("mySidenav");
function openNav() {
document.getElementById("sidenav").style.width = "30%";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
window.onclick = function(event) {
if (event.target == BArea && event.target != WArea) {
closeNav();
// document.getElementById("sidenav").style.width = "0";
}
}
</script>
</body>
</html>