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+HTML5加入购物车代码分享
Oct 29 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 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
详解提高使用Java反射的效率方法
2019/04/29 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
Python 正则表达式操作指南
2009/05/04 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python读写LMDB文件的方法
2018/07/02 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
培训主管的职业生涯规划
2014/03/06 职场文书
大学生评语大全
2014/04/18 职场文书
倡议书格式模板
2014/05/13 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
小学学校评估方案
2014/06/08 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
电视新闻稿
2015/07/17 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS