叠加框出现在屏幕中央

Question

I have some JS code that fades the background to a dark colour and opens a white modal window, like so:

function open_litebox(link) {
    var overlay_black = 'position:absolute;top:0%;left:0%;width:100%;height:100%;background:black;z-index:1001;opacity:0.5;';
    $('body').append('<div style="' + overlay_black + '"></div>');
    var overlay_white = 'position:absolute;top:25%;left:25%;padding:5px;background-color:white;z-index:1002;overflow:auto;';
    $('body').append('<div style="' + overlay_white + '"><p>heeeyyy</p></div>');
}

But the problem is, it doesn't appear dead center in the screen. I want the modal window to be positioned in the dead center both vertically and horizontally, but I don't know what the width/height of the content inside the modal window is going to be so I can't set fixed values.

Any help is appreciated, cheers.

Answer 1

You need to use these styles to make your white overlay appear dead-center :

var overlay_white = 'position:absolute;
                     top:50%;
                     left:50%;
                     background-color:white;
                     z-index:1002;
                     overflow:auto;
                     width:400px;
                     height:400px;
                     margin-left:-200px;
                     margin-top:-200px';

So position should be specified. The top and left should be 50% . The margin-left and margin-top should be negative one half of the width and height of the box respectively.

Answer 2

I know this is an old question, but it came up while I was googling the topic, and I wanted to provide an updated answer.

Expanding on Sarfraz's answer, you do not need to explicitly specify the width and height. If these are unknown (or you do not want to set them), you can use the following in your styling:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

The transform line figures out the width and height for you.

Answer 3

You should be able to get the width and height of an element after the content is loaded (try using jquery helpers for that - width() , height() )

Once you have the dimensions then the calculation can happen and then position the element. You can also keep the element hidden until the positioning has been done so the user does not see the jumpiness.

You can also use a plugin like fancybox which makes things like this really simple.