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 延迟执行实例介绍
Aug 20 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
Vue根据条件添加click事件的方式
Nov 09 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多维数组的深度的方法
2014/01/07 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
php实现文章评论系统
2019/02/18 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
vue实现选中效果
2020/10/07 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
tensorflow 查看梯度方式
2020/02/04 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
房务中心文员岗位职责
2014/04/16 职场文书
2014年就业工作总结
2014/11/26 职场文书
2016年寒假家长评语
2015/10/10 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers