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 class="jclick">弹窗</div>

</div>

jQuery代码自动：

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

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

  var eheight = height/2;

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

})

 

额外：-JS

<style>
*{margin:0px;padding:0px}
.all-tanch{ background:blue; position: fixed;  display:none; color: #fff; padding:50px;}
.wraper{ width:600px; background:#333; color: #fff; position:relative; margin:30px;}
.sonone{background:red; display:none;position:absolute;}
</style>
<Script type="text/javascript" src="jquery.js"></script>
<!--针对浏览器窗口垂直居中-->
<Script type="text/javascript">
function popup(poName){
    var scrollHeight = $(document).scrollTop();//获取当前窗口距离页面顶部高度
    var windowHeight = $(window).height();//获取当前窗口高度
    var windowWidth = $(window).width();//获取当前窗口宽度
    var popupHeight = popupName.height();//获取弹出层高度
    var popupWeight = popupName.width();//获取弹出层宽度
    alert(windowHeight);
    posiTop = (windowHeight)/2;
    posiLeft = (windowWidth)/2;
    poName.css({"left": posiLeft + "px","top":posiTop + "px","display":"block"});//设置position
}
$(function(){
    $(".clickme01").click(function(){
        popup($(".all-tanch"));
        $(".wraper").hide();
    });

});
</script>

<!--针对当前层 窗口垂直居中-->
<Script type="text/javascript">
function middleModle(selectorName){   //参数： 定义的class或ID，，其他
    var fatherHeight = $(".wraper").height();//获取当前窗口高度
    var fatherWidth = $(".wraper").width();//获取当前窗口宽度
    var tanHeight = selectorName.height();//获取弹出层高度
    var tanWeight = selectorName.width();//获取弹出层宽度
    var poTop = (fatherHeight - tanHeight)/2;
    var poLeft = (fatherWidth - tanWeight)/2;
    selectorName.css({"left": poLeft + "px", "top":poTop + "px", "display":"block"});//设置position位置
}
$(function(){
    $(".clickme02").click(function(){
        $(".wraper").show();
        middleModle($(".sonone"));
    });
});
</script>

<input class="clickme01" type="button" value="针对浏览器窗口垂直居中"/>
<input class="clickme02" type="button" value="针对当前窗口垂直居中"/>
<div class="all-tanch">
     整个弹窗
</div>
<div class="wraper">
    我是父级层--
    <div class="sonone">大家好，我是弹窗，没有样式自己凑合着看吧！！！！</div>
</div>