Doesn't show model window

Вопрос-ответ JavaScript
1

As planned, the model window should appear from the corner, and disappear, like a mouse not on an element of the model window, but my window just appeared, but after adding the condition, if nothing works,

 <div id="enterModal"><img src="/img/open.png" width="15px" height="15px">Войти</div>
                <div id="showModal">
                    <a href="/pablic/login.php">Log In</a>
                    <a href="/pablic/signup.php">Sign Up</a>
                </div>

css

#enterModal{
position: relative;
}
#showModal{
    display: none;
    width: 300px;
    height: 300px;
    background: rgb(252, 254, 252);
    position: absolute;
    right: 0;
    top: -10px;
    z-index: 99999;
    box-shadow: 0 0 15px gray;
    border-radius: 10px;
    transform: scale(0);
    transition: .5s;
} 
#showModal>a{
  display: grid;
    height: 40px;
    width: 90px;
    background: black;
    border-radius: 5px;
    color: white;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 30px;
    
}

javascript

 enterModal.onclick = function () {
        showModal.style.display = "block";
        showModal.style.transform = "scale(1)";
        if (showModal.onmouseover != showModal) {
            showModal.style.display = "none";
        }
    }
2 
const enterModal = document.querySelector('#enterModal'),
				      showModal = document.querySelector('#showModal');
				
		enterModal.addEventListener( 'click', function(){
          showModal.style.display = 'block';
          showModal.style.transform = 'scale(1)';
           showModal.addEventListener( 'mouseleave', function(){ this.style.display = 'none'; }  );
	    });
3

СТОЛЬКО оказывается много кода нужно писать что бы просто вывести окно и закрыть его,пипец как сложно оказывается)))

4

Condition seems to always evaluate in true. Because of that showModal.style.display = "none"; is executed in call cases hiding the dialog. See how that works in the fiddle https://jsfiddle.net/h7vutm2y/6/.

I assume you accidentaly used same variable name showModal for 2 data points:

  • reference to the DOM node
  • flag indicating is modal should be shown