JSFiddle - React, Tailwind, and code Playground

https://stackoverflow.com/questions/58491169/calling-a-function-on-onclick-event

by samsadtler

HTML

<div id="close-overlay">
parent
<div id="login-container"> 
  
  child

</div>
</div>

CSS

#close-overlay{
  background-color:green;
  width:200px;
  height:200px;
  z-index:1
}
#login-container{
  background-color:yellow;
  width:100px;
  height:100px;
  text-align:center;
  z-index:20;
}

JavaScript

function closeMenu(e) {

    var child = document.getElementById("login-container"),
    parent = document.getElementById("close-overlay");

    if(e.target == parent){
    	 child.style.opacity = "0";
       child.style.zIndex = "-10";
    }
   
}
var closeBtn = document.getElementById("close-overlay");
closeBtn.addEventListener("click", closeMenu);