CODEWITHSUNDEEP
jqueryhtmlcssweb
Greek Freak
Greek Freak

Reputation: 385

Pop-up div to stay in center of visible screen

<style>
.black_overlay{
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 562px;
    height: 380px;
    background-color: white;
    z-index:1002;
    overflow: hidden;
    }
</style>

I am trying to popup the div "white_content" in the middle of the currently visible screen when a link is clicked. Even though the div will stay with the scroll, I want it to come up in the center visible screen. The black overlay just greys out the background.

Upvotes: 0

Views: 1611

Answers (4)

Tharaka Nuwan
Tharaka Nuwan

Reputation: 782

Try this

.white_content {
    visibility: hidden; 
    position:fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
}

Upvotes: -1

Palpatim
Palpatim

Reputation: 9262

Adendeo's answer above works for your case because you know the dimensions of your popup. Another technique, if your browser support requirements allow, is to use translate rather than a hardcoded pixel value:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

This works because translate calculates its length values based on the size of the element, not its container.

Upvotes: 0

Shakesy
Shakesy

Reputation: 335

To get the white box perfectly in the center you need to set top and left to 50%, then subtract half the width and height using margin, in this case margin: -190px 0 0 -281px;

Upvotes: 0

adeneo
adeneo

Reputation: 318182

To get the popup to center, position it 50% from the top and left, then subtract half the popups size with the margins

.white_content {
    display  : none;
    position : fixed;
    top      : 50%;
    left     : 50%;
    width    : 562px;
    height   : 380px;
    margin   : -190px 0 0 -281px;
    z-index  : 1002;
    overflow : hidden;
    background-color: white;
}

FIDDLE

Upvotes: 2

Related Questions