window.onclick = function(event) only doesnt working

Question

I have a modal pop-up windows on an HTML page, and after they're opened, it doesnt close by clicking outside of the modal with this code:

Opening working perfectly but it doesnt close. I will be happy if somebody let me fix this issue/

Thank you so much

var BtnLogin = document.getElementById("login");
var LoginScreen = document.getElementById('login-js');

BtnLogin.onclick = function() {
  LoginScreen.style.display = "block";
}

window.onclick = function(event) {
  if (event.target == LoginScreen) {
    LoginScreen.style.display = "none";
  }
}

.login-member {
    background-color: #ffffff;
    position: absolute;
    right: 0px;
    top: 38px;
    width: 280px;
    height: 200px;
    display: none;
}

<ul class="navbar-account">
  <li class="login" id="login">LOGIN
    <div class="login-member" id="login-js">
      <form class="login-form" action="login.php" method="post">
        <div class="email">
          <input id="email" type="text" placeholder="Email Adress" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Adress'">
          <span> <i class="fas fa-envelope icon-position"></i></span>
        </div>
        <div class="password">
          <input id="password" type="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">
          <span><i class="fas fa-lock icon-position"></i></span>
        </div>
        <button type="submit">LOGIN</button>
      </form>
    </div>
  </li>
</ul>

https://stackoverflow.com/questions/36695438/detect-click-outside-div-using-javascript — epascarello, Jan 15 '21 at 20:32

score 0 · Accepted Answer · answered Jan 15 '21 at 20:56

var BtnLogin = document.getElementById("login");
var LoginScreen = document.getElementById('login-js');


window.onclick = function() {
  LoginScreen.classList.toggle('show')
}

.login-member {
    background-color: #ffffff;
    position: absolute;
    right: 0px;
    top: 38px;
    width: 280px;
    height: 200px;
    display: none;
}

.show{
display:block;}

<ul class="navbar-account">
  <li class="login" id="login">LOGIN
    <div class="login-member" id="login-js">
      <form class="login-form" action="login.php" method="post">
        <div class="email">
          <input id="email" type="text" placeholder="Email Adress" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Adress'">
          <span> <i class="fas fa-envelope icon-position"></i></span>
        </div>
        <div class="password">
          <input id="password" type="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">
          <span><i class="fas fa-lock icon-position"></i></span>
        </div>
        <button type="submit">LOGIN</button>
      </form>
    </div>
  </li>
</ul>

window.onclick = function(event) only doesnt working

1 Answers1