Как сделать закрытие окна при нажатии на пустую область за пределами окна?

Question

[Алексей]

Смог сделать закрытие при нажатии на крестик, но не понимаю как сделать закрытие блока при нажатии на пустую область за пределами окна

.overlay {
              /* Height & width depends on how you want to reveal the overlay (see JS below) */
              height: 100%;
              width: 0;
              position: fixed; /* Stay in place */
              z-index: 1; /* Sit on top */
              left: 0;
              top: 0;
              background-color: rgb(247, 106, 25) ; /* Black fallback color */
              background-color: rgba(247, 106, 25, 0.9); /* Black w/opacity */
              backdrop-filter: blur(5px);
              overflow-x: hidden; /* Disable horizontal scroll */
              transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
            }
          
            /* Position the content inside the overlay */
            .overlay-content {
              position: relative;
              top: 20%; /* 25% from the top */
              width: 80%; /* 100% width */
              text-align: right; /* Centered text/links */
              margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
              margin-left:7%;
            }
          
            /* The navigation links inside the overlay */
            .overlay a {
              padding: 8px;
              text-decoration: none;
              font-size: 36px;
              color: #818181;
              display: block; /* Display block instead of inline */
              transition: 0.3s; /* Transition effects on hover (color) */
            }
            .overlay a:hover, .overlay a:focus {
              color: #f1f1f1;
            }
            .overlay .closebtn {
              position: absolute;
              color:#ffffff;
              top: 20px;
              right: 45px;
              font-size: 60px;
            }
          
            /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
            @media screen and (max-height: 450px) {
              .overlay a {font-size: 20px}
              .overlay .closebtn {
                font-size: 40px;
                top: 15px;
                right: 35px;
              }
            }

<nav class="site-header sticky-top py-1" id="navbar-home-row">
        <div class="row" id="menu_home_page_row">
          <div class="col-md-6">
              <a onclick="OpenNavShowProfile()" id="menu_home_page_profile" style="cursor: pointer">profile</a>
          </div>
          <div class="col-md-6" id="search_container">
            <form >
              <input type="text" placeholder="Поиск.." name="search">
              <button type="submit"><i class="fa fa-search"></i></button>
            </form>
          </div>
        </div> 
      </nav>

      <div class="main-parent-el" >
      
        <div class="window_home" >
          
          <div id="navbar_overwrited" data-togle="wallpaper">
            <nav class="site-header sticky-top py-1">
  
              <div id="myNav-message-sent" class="overlay-message-sent">
      
                <!-- Button to close the overlay navigation -->
                <a href="javascript:void(0)" class="closebtn-message-sent" onclick="closeNavMessageSent()">&times;</a>
              
                <!-- Overlay content -->
                <div class="overlay-content-message-sent">
                  <h1 style="font-weight: 100; font-family:'Courier New', Courier, monospace; font-size: 42px; text-align: center;">Письмо отправлено!</h1>
                  <p style="font-size: 24px; font-family:'Courier New', Courier, monospace; text-align: center;">
                    Проверьте введённый адрес электронной почты.<br>
                    Мы выслали вам письмо с ссылкой для подтверждения регистрации аккаунта.<br>
                    С нетерпением ждём увидеть вас снова!
                  </p>
                </div>
              
              </div>
      
              <div id="myNav-account-in-use" class="overlay-account-in-use">
      
                <!-- Button to close the overlay navigation -->
                <a href="javascript:void(0)" class="closebtn-account-in-use" onclick="closeNavAccountInUse()">&times;</a>
              
                <!-- Overlay content -->
                <div class="overlay-content-account-in-use">
                  <h1 style="font-weight: 100; font-family:'Courier New', Courier, monospace; font-size: 42px; text-align: center;">Мы вас помним!</h1>
                  <p style="font-size: 24px; font-family:'Courier New', Courier, monospace; text-align: center;">
                    Вы не заходили к нам давно, забыли пароли<br>
                    или просто хотите новый аккаунт?<br>
                    Не беда! Вкладка PROFILE вам поможет.
                  </p>
                </div>
              
              </div>
      
              <div id="myNav" class="overlay">
                <a href="javascript:void(0)" class="closebtn" onclick="CloseNav_CreateAccount()">×</a>
                <div class="overlay-content">
                  <h2 id="home_page_welcome">Welcome!</h2>
        
                  <form id="form_create_account" method="POST">
                    {% csrf_token %}
                    <div class = "row">
                      <div class="col-md-6">
                        <div class="input-group input-group-lg">
                          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" id="firstName" placeholder="First Name" name="firstName" value="" required="">
                        </div>
                        <br>
                        <div class="input-group input-group-lg">
                          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" id="email" placeholder="E-mail" name="email" value="" required="">
                        </div>
                        <br>
                        <div class="input-group input-group-lg">
                          <input type="password" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" id="password" placeholder="Password" name="password" value="" required="">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="input-group input-group-lg">
                          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm" id="secondName" placeholder="Second Name" name="secondName" value="" required="">
                        </div>
                        <br>

const screenWidth = window.screen.width
const screenHeight = window.screen.height

/* Open when someone clicks on the span element */
function OpenNav_CreateAccount() {
    document.getElementById("myNav").style.width = "50%";
    }


function CloseNav_CreateAccount() {
document.getElementById("myNav").style.width = "0%";
    }

Answer 1

[v3shin]

Как-то так. Классы и функцию подставьте свои.

document.addEventListener('click', function(e) {
    if (!e.target.closest('.modalClass')) {
        closeModal();
    }
});