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 EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
详解Vue数据驱动原理
Nov 17 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中实现进程间通讯
2006/10/09 PHP
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
获取URL文件名后缀
2013/10/24 PHP
php短址转换实现方法
2015/02/25 PHP
php算法实例分享
2015/07/14 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python实现Floyd算法
2018/01/03 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
乔迁之喜主持词
2014/03/27 职场文书
个人担保书格式范文
2014/05/12 职场文书
团日活动总结模板
2014/06/25 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
nginx内存池源码解析
2021/11/20 Servers
Redis实现分布式锁的五种方法详解
2022/06/14 Redis