欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-05-14 10:38:17|栏目:JavaScript代码|点击:

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

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

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轻松处理json文本方便而老古

栏    目:JavaScript代码

下一篇:基于JavaScript实现十五拼图代码实例

本文标题:js实现弹窗居中的简单实例

本文地址:http://www.codeinn.net/misctech/121296.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有