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 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
谈一谈javascript闭包
Jan 28 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
前端微信支付js代码
Jul 25 Javascript
Highcharts学习之数据列
Aug 03 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
Vue组件实现触底判断
Jun 26 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 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 mssql 时间格式问题
2009/01/13 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python scatter函数用法实例详解
2020/02/11 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
不假外出检讨书
2014/01/27 职场文书
安全教育实施方案
2014/03/02 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书