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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
老生常谈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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php中socket的用法详解
2014/10/24 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
用jquery来定位
2007/02/20 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
python简单读取大文件的方法
2016/07/01 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python使用生成器实现可迭代对象
2018/03/20 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python爬虫如何解决图片验证码
2021/02/14 Python
美德好少年主要事迹
2014/01/29 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
白酒市场营销方案
2014/02/25 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
大学生就业意向书
2015/05/11 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers