jQuery弹出层始终垂直居中相对于屏幕或当前窗口
把弹出层的位置设为fixed，设置top：50%，然后获取当前元素的整体的高度height，用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于当前窗口
弹出层永远是一个前端必须搞定的东西，一般情况下，如果弹出层有固定的高和宽，用样式即可搞定，但是如果碰到没有固定高或者固定宽或者固定高和宽的时候， 我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码，或许对你有用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{margin:0px;padding:0px}
#div1{background:#F00;color: #FFF; display:none;position:absolute;}
#div2{background:#333333;color: #FFF;width:400px;display:none; position:absolute;}
</style>
<Script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
//浏览器窗口垂直居中
<!--
<Script type="text/javascript">
function popup(popupName){
var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
_windowHeight = $(window).height(),//获取当前窗口高度
_windowWidth = $(window).width(),//获取当前窗口宽度
_popupHeight = popupName.height(),//获取弹出层高度
_popupWeight = popupName.width();//获取弹出层宽度
_posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
_posiLeft = (_windowWidth - _popupWeight)/2;
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
}
$(function(){
$(".btn1").click(function(){
popup($("#div1"));
});
$(".btn2").click(function(){
popup($("#div2"));
});
});
</script>
-->
//当前窗口垂直居中
<Script type="text/javascript">
function popup(popupName){
_windowHeight = $(".wrap").height(),//获取当前窗口高度
_windowWidth = $(".wrap").width(),//获取当前窗口宽度
_popupHeight = popupName.height(),//获取弹出层高度
_popupWeight = popupName.width();//获取弹出层宽度
_posiTop = (_windowHeight - _popupHeight)/2;
_posiLeft = (_windowWidth - _popupWeight)/2;
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
}
$(function(){
$(".btn1").click(function(){
popup($("#div1"));
});
$(".btn2").click(function(){
popup($("#div2"));
});
});
</script>
</head>
<body >
<div >
<input class="btn1" type="button" value="1"/></div>
<input class="btn2" type="button" value="2"/></div>
<div style="width:500px; background:#ccc; position:relative; top:100px; left:200px;" class="wrap">
我
是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口
啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口
啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊
<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊
<div
id="div1">我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<
br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹
出窗口1111啊</div>
<div
id="div2">我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊<
br>我是弹出窗口2222啊<br>我是弹出窗口2222啊</div>
</div>
</body>
</html>
jQuery弹出层始终垂直居中相对于屏幕或当前窗口的更多相关文章
- 【转载】jQuery弹出层始终垂直居中于当前屏幕
一般网站上肯定有一些弹出框,不论弹出框的大小,都需要他在当前窗口垂直居中.之前手上就有一个jQuery的例子,后来才发现,他只能在第一屏垂直居中,如果滑动滚动条,弹出的框就在上方,不是很方便.请教朋友 ...
- JQuery弹出层，实现弹层切换，可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 基于jQuery弹出层图片动画查看代码
分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&q ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- jQuery弹出层效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- 简单实用的JQuery弹出层
效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...
随机推荐
- ZOJ 3652 Maze 模拟,bfs,读题 难度:2
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4842 要注意题目中两点: 1.在踏入妖怪控制的区域那一刹那,先减行动力,然后才 ...
- POJ 1777 mason素数
题目大意: 给定数列 a1 , a2 , ... , an 希望找到一个 N = sigma(ai^ki) , (0<=ki<10) ,ki可随自己定为什么 只要保证N的因子和可以表示 ...
- 使用OTT处理oracle中的对象（一） OTT配置
OTT是OCI中访问对象类型数据的重要工具,它将数据库中的对象数据类型或集合类型映射为C++中的结构体类型.OTT是Oracle自带的,但是使用前必须配置一下环境变量.在计算机->属性-> ...
- Qt之控件美化
级联样式表 (CSS) 包含应用于网页中的元素的样式规则.CSS 样式定义元素的显示方式以及元素在页中的放置位置.可以创建一个通用规则,只要 Web 浏览器遇到一个元素实例,或遇到一个分配给某个特定样 ...
- 使用icon替换你的网页图标（转）
第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方网站下载解压 http://fontawesome.io/ 2: 解压后 ...
- centos ssh 无密码登录
在linux系统中,ssh是远程登录的默认工具,因为该工具的协议使用了RSA/DSA的加密算法.该工具做linux系统的远程管理是非常安全的.telnet,因为其不安全性,在linux系统中被搁置使用 ...
- Git的常用命令的使用方法和解释
我们常用的git命令: add Add file contents to the index(将文件添加到暂存区) 用法: 保存某个文件到暂缓区:git add 文件名 保存当前路径的 ...
- SpringMvc中的反射
controller中的方法,是通过反射调用的 spring监控controller中的注解,当命令符合某个注解的时候,通过反射,找到这个注解对应的方法,然后调用,处理完成得到返回值,再根据这个返回值 ...
- 关于WinForm引用WPF窗体---在Winform窗体中使用WPF控件
项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...
- Python - 学习经验分享
执行方式: 直接输入python进入命令行,进行单行输入执行,退出后不保存. python filename.py或./filename.py 直接执行脚本文件 脚本格式: #!/usr/bin/py ...