在没有JavaScript的情况下将弹出窗口定位在屏幕中间

时间:2011-02-23 13:43:58

标签: css popupwindow

我有以下HTML和CSS,现在我想将弹出窗口放在任何浏览器窗口大小的屏幕中间。没有JavaScript,这可能吗?

CSS:

.floating-window {
    z-index: 9999;
    position: absolute;
    width: 200px;
height: 200px;  
    cursor: default;
    -moz-box-shadow: 1px 1px 1px #888;
    -webkit-box-shadow: 1px 1px 1px #888;
    box-shadow: 1px 1px 1px #888;
}

HTML:

<div class='floating-window box'></div>

2 个答案:

答案 0 :(得分:2)

使用百分比,您可以设置框,使其一半位于左侧。所以

width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */

您也可以使用px但是您将被限制为绝对容器宽度。你有没找过?我知道有一些文章比我更广泛地解释这种方法。

答案 1 :(得分:0)

当然,这是可能的,但是你怎么能让它消失呢?

这需要JavaScript ......