叠加框出现在屏幕

问题描述：

我有变淡的背景，深色，并打开一个白色模式窗口，像这样一些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>'); 
}

但问题是，这不是” t在屏幕上显示死点。我希望模态窗口在垂直和水平方向都位于死点，但我不知道模态窗口内的内容的宽度/高度是什么，所以我不能设置固定值。

任何帮助表示赞赏，欢呼声。

答

内容加载后，你应该能够得到一个元素的宽度和高度（建议使用jquery助手为 - width()，height()）

一旦你的尺寸，然后计算可能发生，然后定位元素。您也可以将元素隐藏，直到定位完成，以便用户看不到跳动。

你也可以使用像fancybox这样的插件，这样做很简单。

答

你需要使用这些样式，让您的白色覆盖出现止点：

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';

所以position应符合规定。 top和left应该是50%。 margin-left和margin-top应分别为框的宽度和高度的一半。

如果您希望框在滚动时移动，请将“位置”设置为“固定”。 – redburn 2013-10-24 12:18:35

答

我知道这是一个古老的问题，但它出现在我使用Google的主题时，我想提供一个更新的答案。

在Sarfraz的答案上展开，你不需要明确指定宽度和高度。如果这些都是未知数（或者你不想设置），你可以使用你的造型以下内容：

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

变换线计算出的宽度和高度为您服务。

叠加框出现在屏幕

相关推荐