Box appears somewhere out of the screen/brwoser-window

I use the following css for a modal box that is hidden first and is shown, when the user clicks a link. It should appear in the middle of the screen. The problem is, when I first scroll down the website and then click the link, the box appears somewhere out of the screen/brwoser-window and is not visible. How to correct the css, so that the box always apperas in a visible area?

.modal {  
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

CodePudding user response：

Use fixed instead of absolute this should fix the issue

.modal {  
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

CodePudding user response：

You should use position:fixed; instead of position:absolute;