• 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 Closing a window outside as well

anuraa

Coder
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


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()"> &times;</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()">
        &#9776;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>
 

anuraa

Coder
Not exactly. I tried that answer there. It worked. As soon as something is added to the body, it makes different and difficult. There, my question was not clear.

Here, I am trying to understand the JavaScript and change only the JavaScript so that I can add/ change the body freely. Thanks
 

anuraa

Coder
var bodyarea = document.getElementsByTagName("BODY")[0];

Here, it retrieves the body area. Is it possible to to get the overlay window area say windowarea.

If so, will the following logic work.

Event.target = bodyarea and event.target != windowarea
Then to close the window provided the window is open. I have no clue to check whether the window is opened.

Hope, the person who answered to my previous post will see and help me. Thanks
 

Johna

Frontend Web Developer
Staff Team
Guardian
Is it possible to to get the overlay window area say windowarea.
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];

I have no clue to check whether the window is opened.
You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
 

anuraa

Coder
var bodyarea = document.getElementsByTagName("BODY")[0];

Here, it retrieves the body area. Is it possible to to get the overlay window area say windowarea.

If so, will the following logic work.

Event.target = bodyarea and event.target != windowarea
Then to close the window provided the window is open. I have no clue to check whether the window is opened

Hope, the person who answered to my previous post will see and help me. Thanks
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];


You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];


You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
Thanks so much. Unfortunately, until December 11, I am away from my computer. I am going to change my script as follows.

<script>
Var windowopened = false;
function openNav() {
document.getElementById("sidenav").style.width = "30%";
windowopened = true;
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
windowopened = false:
}
window.onclick = function(event) {
if (event.targetWArea) {
closeNav();
}
}
</script>
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];


You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
Thanks so much for that idea. I am still struggling to make that click outside the window overlay only. If I don’t have the the both conditions i.e. Window is opened and also, the click is outside the window, a click anywhere within the window too will also make the window to close.

window.onclick = function(event) {
if Windowopened && click is outside the window.
function closenav

I am getting closer to the solution with your help. Thanks again.
 

Johna

Frontend Web Developer
Staff Team
Guardian
I am still struggling to make that click outside the window overlay only. If I don’t have the the both conditions i.e. Window is opened and also, the click is outside the window, a click anywhere within the window too will also make the window to close.
Try this, I think what you're asking is similar to this: https://codeforum.org/threads/how-do-i-do-something-to-the-body-while-a-popup-is-showing.5643
Create an element behind the window, and make it cover the full screen. Then when that element is clicked use JS to close the window.
That way you can also add blur/opacity if you want.
 

anuraa

Coder
Try this, I think what you're asking is similar to this: https://codeforum.org/threads/how-do-i-do-something-to-the-body-while-a-popup-is-showing.5643
Create an element behind the window, and make it cover the full screen. Then when that element is clicked use JS to close the window.
That way you can also add blur/opacity if you want.
Thanks for your input. It is not easy to incorporate that idea with my level of knowledge. Here, in my layout, my
1. opening the window is working
onclick="openNav()">
2. closing the window is working onclick="closeNav”.
3. Now, I am trying to figure out to close the window, if a click is outside “”anywhere”” the window, provided the window is opened. Someone, enlighten me with to have the variable to see whether the window is opened or not.
I would like someone helping me to incorporate the third part purely with JavaScript. Hopefully, full code, as I am a beginner to JavaScript. Thanks
 

anuraa

Coder
Thanks for letting me that idea.

If document.getElementById(“side above”).style.width = 30 && “area of click is outside the sidnav” {
CloseNav}

If I don’t include the condition “area of click is outside the sidnav”, then, the window will close within the overlay window area as well. Now, I am stuck with including the section coo
 

cbreemer

King Coder
Last sentence ??
Try this in your click event handler :

if ( sidenav.style.width != 0 && event.target != sidenav )

Test on non zero rather than equals 30, as you might want to change the width one day. Your original equality test was wrong BTW, you should have used == instead of =.
 
Top