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之六 缓存数据功能介绍
Jun 21 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
JQuery学习总结【一】
Dec 01 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
JS实现放烟花效果
Mar 10 Javascript
VSCode 配置uni-app的方法
Jul 11 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往windows中添加用户
2006/12/06 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
jQuery 操作XML入门
2008/12/25 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
港湾网络笔试题
2014/04/19 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
课程设计感想范文
2015/08/11 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL