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中判断函数是new还是()调用的区别说明
Apr 07 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
我的论坛源代码(八)
2006/10/09 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
利用Python如何生成便签图片详解
2018/07/09 Python
python构建基础的爬虫教学
2018/12/23 Python
python多进程并行代码实例
2019/09/30 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
JDO的含义
2012/11/17 面试题
求职自荐信
2013/12/14 职场文书
战友聚会策划方案
2014/06/13 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
销售顾问工作计划书
2014/09/15 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
大学生实习介绍信
2015/05/05 职场文书
毕业证明模板
2015/06/19 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL