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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
如何使用原生Js实现随机点名详解
Jan 06 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面向对象编程快速入门
2006/10/09 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
wxpython实现图书管理系统
2018/03/12 Python
使用Python来开发微信功能
2018/06/13 Python
详解python算法之冒泡排序
2019/03/05 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python获取栅格点和面值的实现
2020/03/10 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
delegate与普通函数的区别
2014/01/22 面试题
入股协议书范本
2014/04/14 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
爱心助学感谢信
2015/01/21 职场文书
合作合同协议书范本
2015/01/27 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python