Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Legendary 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...
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.
 
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
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: 4

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom