本文分享了jQuery点击按钮弹出蒙版图层，内容居中的特殊效果。让我们看看最后的效果：

因为是测试程序，所以没有添加关闭按钮。一、主程序

！doctype html html head meta charset=' utf-8 '/title popup centering mask/title meta name=' viewport ' content=' width=device-width，initial-scale=1，minimum-scale=1，maximum-scale=1，User-scalable=no'/linkrel='样式表' Type=' text/CSS ' href=' CSS/layout . CSS '/head dy Section class=' test '以下是主要内容br/Type=' button ' class=' test button ' value=' popup mask '//

* { margin : 0；padd : 0；}.testBg{ position:绝对值；top : 0；背景色： # 000；filter:alpha(不透明度=80)；/* IE */-moz-opa city 33600.8；/* Moz FF */opa city 3360 0.8；/*支持CSS3的浏览器(FF 1.5也支持)*/display : none；}.testBg。testCont{ position:绝对值；top : 0；left : 0；宽度width:200pxborder: 1px #ffc700固体；color: # ffc700}三、JS程序这是本文的重点。让我们看看一个错误的JS程序：

$(function(){ $(')。testBg’)。高度($(窗口)。高度())。宽度($(窗口)。width())；//使蒙版的背景覆盖整个页面var testconttop=($ (window)。height ()-$('。test cont’)。高度())/2；//计算弹出框到页面顶部的距离var testcontwidth=($ (window)。width ()-$('。test cont’)。width())/2；//计算弹出框到页面$()左侧的距离。test cont’)。CSS ({'top' : testconttop，' left ' : test contwidth })；$('.test button’)。单击(function(){ $(')。testBg’)。show()；})})上面的程序似乎没有问题，那么我们来看看输出结果：

实际上，顶部和底部之间的距离是不一致的。

那么正确的JS程序是：

$(function(){ $(')。testBg’)。高度($(窗口)。高度())。宽度($(窗口)。width())；//使蒙版的背景覆盖整个页面$(')。test button’)。单击(function () {$(')。testbg’)。show()；showDiv()；}) })函数showDiv(){ var testcontenttop=($(window)。height()-$('。test cont’)。高度())/2；//计算弹出框到页面顶部的距离var testcontwidth=($ (window)。width ()-$('。test cont’)。width())/2；//计算弹出框到页面$()左侧的距离。test cont’)。CSS ({'top' : testconttop，' left ' : test contwidth })；}从上面的程序可以看出，蒙版图层弹出显示后，执行一个功能，动态设置弹出图层的背景大小和与页面的上下左右间距，而不是在加载JS开始就设置弹出图层的所有参数。

这就是本文的全部内容，教你如何实现点击按钮弹出内容居中的蒙版图层的效果。