为了账号安全,请及时绑定邮箱和手机立即绑定

只是看到这里,就感觉老师要用上 JS 来实现了。我自己用纯CSS实现的:

.window {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    margin-left: -300px;
    margin-top: -200px;
    background: #eee;
}

在兼容IE6的情况下,可以使用CSS表达式来解决无 position: fixed 和位置定位的问题。

正在回答

2 回答

很想知道楼主设置margin为负数是个什么目的?

0 回复 有任何疑惑可以回复我~
#1

ITer在路上

拿垂直方向来说,设个top:50%,这个时候弹出层刚刚在整个可视窗口中间水平线之下,然后在设置margin-top为弹出层高度值负的一半,这个时候弹出层在垂直方向已经处于整个可视窗口的中间了,水平方向同理可得!
2015-10-11 回复 有任何疑惑可以回复我~

这的确是一种好方法,如果不考虑IE8-的话还有一种更简洁的方法:

.window {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

这种方法无需设置对象的宽高。

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
弹出层效果
  • 参与学习       39069    人
  • 解答问题       157    个

通过本课程的学习让您能灵活运用知识,制作出超炫的弹出层效果

进入课程
意见反馈 帮助中心 APP下载
官方微信