弹层高度不固定,始终上下居中

html:

<div class="TopContainer">

  <div class="TopContainMain">
  <p>请您先进行实名认证
  </p>
  </div>
  <span class="bottomsureBtn close">确定</span>

</div>

css:

.TopContainer{

z-index:99;

position:fixed;

width:84%

;left:50%;

top:50%;

margin-left:-42%;

background-color:#fff;

color:#333;

display:none;

border-radius:4px;

 -webkit-border-radius:4px 

}

.TopContainMain {

1. text-align: center;
2. padding: 8%;

}

.TopContainMain>p {

1. font-size: 1.5rem;
2. color: #333;
3. line-height: 2.1rem;

}

js代码:

1.先定义一个方法height();

2.定义一个变量,获得该弹层到页面上边的距离 topHeight

3.这是该弹层Css的高度值就是margint-top:-topHeight/2

具体代码如下:

function height(){
var topHeight=$(".TopContainer").outerHeight();
$(".TopContainer").css("margin-top",-topHeight/2);
}

每次调用弹层的时候就要调用height()方法就行

如下:

$('.OpenClickBtn').click(function(){
$('.top_mask,.TopContainer').fadeIn(100);
height();
})