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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
leaflet的开发入门教程
Nov 17 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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
php4的session功能评述(一)
2006/10/09 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Python wordcloud库安装方法总结
2020/12/31 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
带薪年假请假条
2014/02/04 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书