javascript 出现在屏幕中央的叠加框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4249907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay box appearing in the center of the screen
提问by Wen
I have some JS code that fades the background to a dark colour and opens a white modal window, like so:
我有一些 JS 代码可以将背景淡化为深色并打开一个白色的模态窗口，如下所示：
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.
任何帮助表示赞赏，干杯。
回答by Sarfraz
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 positionshould be specified. The topand leftshould be 50%. The margin-leftand margin-topshould be negative one half of the width and height of the box respectively.
所以position应该指定。该top和left应50%。的margin-left和margin-top应该是负一盒子的宽度和高度分别一半。
回答by C Thompson
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:
扩展 Sarfraz 的答案，您不需要明确指定宽度和高度。如果这些未知（或者您不想设置它们），您可以在样式中使用以下内容：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
The transform line figures out the width and height for you.
变换线为您计算出宽度和高度。
回答by RDL
You should be able to get the width and height of an element after the content is loaded (try using jqueryhelpers for that - width(), height())
您应该能够在加载内容后获取元素的宽度和高度（尝试使用jquery助手 - 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 fancyboxwhich makes things like this really simple.
你也可以使用像fancybox这样的插件，让这样的事情变得非常简单。
