JS实现弹窗居中的简单实例

作者:竹影时间:2026-10-30 15:05:20浏览:98

本文介绍利用CSS固定定位与jQuery动态计算高度,实现弹窗在浏览器窗口中垂直水平居中的方法。通过设置top和left为50%并配合负边距及JS动态调整margin-top,适配不同浏览器尺寸。

实现弹窗居中的方法

在某些页面设计中,常会遇到弹窗未居中的情况,此时需根据浏览器窗口的大小动态调整弹窗的显示位置。

此前我也曾面临此类问题,现将所掌握的方法整理分享。

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实现弹窗居中的简单实例全部内容了,希望大家多多支持本站~

作者最新文章