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 相关文章推荐
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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
基于Zend的Config机制的应用分析
2013/05/02 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
vue接口请求加密实例
2020/08/11 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python Opencv将图片转为字符画
2021/02/19 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
高中生期末评语
2014/01/28 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
植树节新闻稿
2015/07/17 职场文书
创业计划书之服装
2019/10/07 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python