你的位置:首页 > Java教程

[Java教程]js实现弹窗居中


在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置,

之前我也遇到这样的问题,现在我把我知道的呈现给大家

css样式

 .windowBox{

   width:500px;

}

.mid-tanBox{

   position: fixed;  top: 50%;  left: 50%;    margin-left: -250px;  background: #fff; border:1px solid red; display:none

}

html代码

<div class='windowBox'>

  <div class ="mid-tanBox"></div>

 <div >弹窗</div>

</div>

jQuery代码自动:

$(".jclick").click(function(i){

  var height = $(".mid-tanBox").height();

  var eheight = height/2;

  $(".mid-tanBox").eq(i).css("margin-top","-eheight");

})