js实现弹窗居中的简单实例
更新时间：2016年10月09日 20:14:13 投稿：jingxian
下面小编就为大家带来一篇js实现弹窗居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在一些页面中，我们总会遇到一些弹窗不居中的时候，还要根据浏览器的大小来调整弹窗的弹出位置，
之前我也遇到这样的问题，现在我把我知道的呈现给大家
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实现弹窗居中的简单实例全部内容了，希望大家多多支持脚本之家~
相关文章
火狐浏览器(firefox)下获得Event对象以及keyCode
firefox Event对象2008-11-11
这篇文章主要介绍了IE中JS跳转丢失referrer问题的2个解决方法,算是IE的一个BUG吧,本文提供了2个方法解决这个问题,需要的朋友可以参考下2014-07-07
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
这篇文章主要介绍了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法,结合实例形式分析了javascript通过针对单击onclick事件增加定时器进行onClick事件与onDblClick事件的区别判定操作,需要的朋友可以参考下2018-06-06
页面中body onload 和 window.onload 冲突的问题的解决
关于页面中body onload 和 window.onload 冲突的问题的解决2009-07-07
本文主要介绍了JS图片压缩的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用，感兴趣的额朋友可以参考下哈，希望对大家学习js有所帮助2013-07-07
本文内容主要介绍，通过使用React+three.js技术栈，加载3D模型、添加3D文字、增加动画、点击交互等，配合样式设计，实现充满设计感的酸性风格页面2021-10-10
下面小编就为大家分享一篇纯js代码生成可搜索选择下拉列表的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
Array 对象用于在单个的变量中存储多个值。2016-06-06
本篇文章主要介绍了Javascript中的async/awai的用法，将分享async / await是如何工作的，有兴趣的可以了解一下2017-05-05
最新评论