Doesn't show modal window

JavaScript
22

Save this as a .html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal</title>
<style>
body{
  text-align: right;
}
#enterModal {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
#showModal {
  width: 300px;
  height: 300px;
  background: rgb(252, 254, 252);
  position: absolute;
  right: 60px;
  top: 8px;
  z-index: 99999;
  box-shadow: 0 0 15px gray;
  border-radius: 10px;
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.5s, right 0.5s, top 0.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;
}
#closeModal {
  color: red;
  font-size: 18px;
  margin: 10px;
}
</style>
</head>
<body>
<button id="enterModal"><img src="/img/open.png">Войти</button>
<div id="showModal">
  <button id="closeModal">✖</button>
  <a href="/pablic/login.php">Log In</a>
  <a href="/pablic/signup.php">Sign Up</a>
</div>
<script>
document.querySelector("#enterModal").addEventListener("mouseover",show);
document.querySelector("#enterModal").addEventListener("click",show);   // for touch devices
document.querySelector("#showModal").addEventListener("mouseleave",hide);
document.querySelector("#closeModal").addEventListener("click",hide);

function show(){
  showModal.style.transform="scale(1)";
}
function hide(){
  showModal.style.transform="scale(0)";
}
</script>
</body>
</html>
23

I again found an error in my code, when the page is compressed, the window opens from another place, as I understand it because of the absolute, but how to make the window always work the same way?

24

To be fair, the window is “always work(ing) the same way”. You told it “be at 60,8”, and it is, every time. It’s just that 60,8 isnt the same place if you crush your window down to the point that items on your page are being rearranged.

If you’re going to start thinking about “what happens if my page is small”, you might want to look at the size of the Modal as well, as you’ve fixed that as 300x300…

25

I said incorrectly, when I zoom out the window then the window shifts, it shouldn’t be like that.