这是另一个中心叠加问题。我需要在它的父容器中居中叠加。
并发症
我目前在两种情况下都将覆盖图设置为屏幕。
请参阅my homepage(尝试两个服务下方的寻呼机)和service list(使用寻呼机)作为示例。
我目前用于屏幕居中的CSS是
.overlay {
display: none;
padding: 20px 0;
text-align: center;
vertical-align: middle;
background: #E9F7FF;
border: 3px solid #97D1F4;
font-size: 1.5em;
color: #97D1F4;
font-weight: bold;
width: 300px;
height: 20px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -150px;
}
是的,我可以使用jQuery来实现这一点。但CSS只是理想的。
答案 0 :(得分:0)
使用jQuery UI来解决 - 实际上非常简单。
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((docViewTop < elemTop) && (docViewBottom > elemBottom));
}
if (isScrolledIntoView(container))
{
$(overlay).position({
my: "center",
at: "center",
of: $(container)
});
}
else
{
$(overlay).position({
my: "center",
at: "center",
of: window
});
}
$(overlay).show();
}
仍然需要找到一种垂直居中到窗口的方法,并且水平居中到父容器,但现在可以使用。