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脚本语言在网页中的简单应用
May 13 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
js图片轮播插件的封装
Jul 21 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
js实现双色球效果
Aug 02 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桌面中心(一) 创建数据库
2007/03/11 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JavaScript中Function详解
2015/02/27 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
Python and、or以及and-or语法总结
2015/04/14 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
军训拉歌口号
2014/06/13 职场文书
群众路线表态发言材料
2014/10/17 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
nginx请求限制配置方法
2021/07/09 Servers
python百行代码实现汉服圈图片爬取
2021/11/23 Python