jQuery点击按钮弹出遮罩层且内容居中特效_jquery

 
 
 
 
 
 
 
 

 这里是主体内容

 
 
 

 

 这里是弹出的内容测试
 
 
 

*{
 margin: 0;
 padding: 0;
}
.testBg{
 position: absolute;
 top: 0;
 background-color: #000;
 filter:alpha(opacity=80); /* IE */ 
 -moz-opacity:0.8; /* Moz + FF */ 
 opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
 display:none ; 
}
.testBg .testCont{
 position: absolute;
 top: 0;
 left: 0;
 width:200px;
 border: 1px #ffc700 solid;
 color: #ffc700;
}

三、JS程序

这个才是本次随笔所说的重点，下面来看一段错误的JS程序：





上面这段程序看起来没有问题，那么来看一下

实际测量的时候上下的间距是不一致的。

那么正确的JS程序是：

从上面程序可以看出在遮罩层弹出显示以后再执行一个函数动态的设置弹出层的背景大小和距离页面的上间距和左间距，而不是一开始加载JS时就已经设置好弹出层各项参数。