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实现弹窗居中的简单实例全部内容了,希望大家多多支持本站~
作者最新文章
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比
2026-11-05 08:36:30
