首页 > 解决方案 > How to center modal window on view port, no matter where you are located on the page?

问题描述

In my Project I am using a modal window to display a sing Up form.

I have 2 "sign up" buttons on my page. when the top button is pressed the Modal window appears right in the middle of the Users view port whilst when the bottom button is pressed the user has to scroll up in order to access the modal.

Is there a way for the modal to appear in front of the user no matter where he is on the page? If it helps here is the CSS I am using to position the modal (the modal is a div):

.popUp {
    width: 30%;
    height:600px;
    margin:auto;
    border: 4px solid black;
    background: white;
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    display: none;
} 

标签: htmlcsscss-positionabsolute

解决方案


推荐阅读