技术前线-绿色安全的源码下载站!
首 页文章资讯下载中心html颜色代码表
当前位置:技术前线文章资讯web技术JavaScript

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

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2016-10-14 13:22:27

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

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

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");
 
})

Tags:js 弹窗居中

作者:佚名
+2
-4

用户名: 查看更多评论

内 容:

         验证码:

所有源码和资料均为软件作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信指出,本站将立即改正。

关于本站 | 网站帮助 | 广告合作 | 下载声明 | 友情连接 | 网站地图 | 资源sitemap | 文章sitemap

Copyright © 2014-2026 技术前线. All Rights Reserved .

Powered by:源码下载www.gaoitde.com 页面执行时间:13,156.25000 毫秒 建站时间:2014-09-28        网站备案:渝ICP备14007251号-1