弹框居中显示方法

为什么80%的码农都做不了架构师？>>>   

html：

<div class="tk">1</div>

css：

<style>
    .tk{background-color:yellow;position:absolute;left:50%;top:50%;}
</style>

js：

//     弹框居中显示
function tk(w,h,obj){
    $(obj).css({width:w+'px'});
    $(obj).css({height:h+'px'});
    $(obj).css({"marginLeft":-(w/2)+'px'});
    $(obj).css({"marginTop":-(h/2)+'px'});
}

function tk2(w,h,obj){
//      屏幕宽度和高度
      var screenW=$(window).width();
      var screenH=$(window).height();


//      获得元素宽度和高度
      var apW=$(obj).css({width:w+'px'});
      var apH=$(obj).css({height:h+'px'});

//      居中算法
      var eleH=screenH-h+'px';
      var eleW=screenW-w+'px';
      
      $(obj).css({top:(eleH/2)+'px'});
      $(obj).css({left:(eleW/2)+'px'});
  }

ps：元素div必须设置定位属性，找到对的参考点

转载于:https://my.oschina.net/lskweb/blog/755312