• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Making click function possible outside window

anuraa

Coder
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()"> &times;</a>
  <a href="#">  Mission</a>
  <a href="#">Services</a>
</div>

<div id="header">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;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>
 
Solution
You mean like this -
HTML:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        #mySidenav {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .sidenav {
            height: 72%;
            width: 0;
            position: fixed;
            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...

cbreemer

King Coder
Your sidebar closes when you click ON it, not when you click outside it, because of the test
if (event.target == sidenav) in the click handler. You may want to remove that test.
 

BGB

King Coder
Staff Team
Guardian
You mean like this -
HTML:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        #mySidenav {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .sidenav {
            height: 72%;
            width: 0;
            position: fixed;
            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;
        }
        #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()"> &times;</a>
            <a href="#">  Mission</a>
            <a href="#">Services</a>
        </div>
    
        <div id="header">
            <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;Menu</span>
        </div>

        <div  id="container">
            <img class="owl1" src="bookkeepings.png" alt="" width="60" height="auto" alt="A "/>
            <p>Learning JavaScript</p>
        </div>
    </div>

    <script>
        var mySidenav = 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 == mySidenav) {
                closeNav();
            }
        }
    </script>   
</body>
</html>
 
Solution

anuraa

Coder
I added some features to my HTML as seen in the photo to see the click outside to not to work. I want the last three lines of the JavaScript code to change to have the following logic where I have no good understanding of JavaScript..
1. If the Ovelay is opened.
2. If there is a touch outside the overlay, then, to close the overlay. Thanks for you helps.
 

Attachments

  • WebPhoto.jpeg
    WebPhoto.jpeg
    628.9 KB · Views: 3
Top