使用 CSS3 transform 实现弹窗绝对居中

WPJAM Basic 在后台使用 Thickbox 实现弹窗效果的,Thickbox 基于 jQuery,虽然很古老,最后一次更新已经是 2014 年了,但是一直非常好用,所以我在各种 WordPress 后台的各种弹窗都是使用 Thickbox 实现的。

Thickbox 弹窗绝对居中的问题

但是 Thickbox 的弹窗有个问题,为了实现弹窗在页面中绝对居中,需要预先定义弹窗的高度,这是因为 Thickbox 弹窗居中是基于其宽度和高度来计算的,所以需要预先知道弹窗的高度,比如 700x800 的弹窗,最后的样式是这样的:

#TB_Window{
	position : fixed;
	left : 50%;
	top : 50%;
	width : 700px;
	height : 800px;
	margin-left : -350px; /*一半的高度*/
	margin-top : -400px;  /*一半的宽度*/
}

为了绝对居中,首先通过 left:50%;top: 50%; 将弹窗的左上角设置为屏幕的正中间,然后在要设置弹窗的 margin-leftmargin-top 为宽度和高度的一半的负值,意思反向移动弹窗的一半,这样刚好居中。

这样每次弹窗的高度变化,都需要重新设置 heightmargin-left 属性,这样就需要动态去计算,但是有时候弹窗里面还有图片,它的高度也是无法实时获取,这样计算的过程变得异常的麻烦,我为了实现效果,写了几百行的 JS 代码,脑阔都疼了。

使用 CSS3 transform 实现绝对居中

哈哈,我写了几百行的 JS 代码实现了弹窗绝对居中,为了实现含有图片的弹窗也能撑开,我加了一秒的演示,还做了动画,总之自己觉得自己都棒棒哒,作为一个后端程序员,感觉自己 jQuery 代码写的 666。

于是我拿去给前端的大神碟总演示,他看了一眼,说用 CSS 几行就能搞定,真的是猛汉流泪,CSS3 新增了 transform 2D/3D 转换的属性,我们无需知道弹窗的宽度和高度就能实现绝对居中,那么我们只需要定义一下弹窗的最大宽度和高度,具体的高度和高度通过内部元素自己撑开。

#TB_Window{
	position : fixed;
	left : 50%;
	top : 50%;
	max-width : 700px;
	max-height : 800px;
	transform: translate(-50%, -50%);
}

最后的效果:


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。

标签: CSS

热门文章