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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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
IIS下PHP的三种配置方式对比
2014/11/20 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
使用PHP开发留言板功能
2019/11/19 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
pygame实现弹力球及其变速效果
2017/07/03 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
毕业生找工作的求职信范文
2013/12/24 职场文书
料理师求职信
2014/01/30 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
留学推荐信怎么写
2015/03/26 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
mysql知识点整理
2021/04/05 MySQL
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL