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


Posted in Javascript onOctober 09, 2016

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

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

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

Javascript 相关文章推荐
node.js中的console.warn方法使用说明
Dec 09 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
微信小程序实现点击效果
Jun 21 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 #Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 #Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 #Javascript
javascript汉字拼音互转的简单实例
Oct 09 #Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 #Javascript
Angularjs 创建可复用组件实例代码
Oct 09 #Javascript
Boostrap实现的登录界面实例代码
Oct 09 #Javascript
You might like
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
PHP打印输出函数汇总
2016/08/28 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JavaScript模拟push
2016/03/06 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
运动会广播稿200米
2014/01/27 职场文书
审计主管岗位职责
2014/01/31 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
可可西里观后感
2015/06/08 职场文书
python 提取html文本的方法
2021/05/20 Python
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Golang日志包的使用
2022/04/20 Golang