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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python装饰器用法实例总结
2018/02/07 Python
Django中间件基础用法详解
2019/07/18 Python
python实现串口通信的示例代码
2020/02/10 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
JAVA中运算符的分类及举例
2015/09/12 面试题
留守儿童工作方案
2014/06/02 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
学前班语言教学计划
2015/01/20 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书