把弹出层的位置设为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弹出层始终垂直居中相对于屏幕或当前窗口的更多相关文章

  1. 【转载】jQuery弹出层始终垂直居中于当前屏幕

    一般网站上肯定有一些弹出框,不论弹出框的大小,都需要他在当前窗口垂直居中.之前手上就有一个jQuery的例子,后来才发现,他只能在第一屏垂直居中,如果滑动滚动条,弹出的框就在上方,不是很方便.请教朋友 ...

  2. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  6. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  7. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  8. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  9. 简单实用的JQuery弹出层

    效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...

随机推荐

  1. 详解centos用户&组权限&添加删除用户

    1.Linux用户操作系统 Linux操作系统是多用户多任务操作系统,包括用户账户和组账户两种: 细分用户账户(普通用户账户,超级用户账户)除了用户账户以为还有组账户所谓组账户就是用户账户的集合,ce ...

  2. Android利用ContentProviderOperation添加联系人

    Android添加联系人有两种方式: 1. 直接调用插入语句,先插入一个空Item,得到一个id,然后给这个id对应的插入其他信息,如姓名,号码,邮件等: 2. 利用ContentProviderOp ...

  3. 数列F[19] + F[13]的值

    已知数列如下:F[1]=1, F[2]=1, F[3]=5,......,F[n] =F[n-1] + 2*F[n-2],求F[19] + F[13]? #include <stdio.h> ...

  4. 【C语言学习】-01 C基础

    本文目录: 0.进制转换 1.C数据类型 2.常量变量 3.运算符 4.表达式 5.格式化输入输出 回到顶部 0.进制转换 在计算机中存储的数据,主要是以二进制形式存在,而我们生活中主要使用的有十进制 ...

  5. 计算C++类所占用的字节（即sizeof）

    在类中,如果什么都没有,则类占用1个字节,一旦类中有其他的占用空间成员,则这1个字节就不在计算之内,如一个类只有一个int则占用4字节而不是5字节.如果只有成员函数,则还是只占用1个字节,因为类函数不 ...

  6. Unity优化之减少Drawcall

    简单来说,Drawcall就是屏幕渲染一次所需要的开销,为了较少消耗,提高性能,一般有以下几种方法. 一: 批处理 1.动态批处理 如果动态物体共用着相同的材质,那么Unity会自动对这些物体进行批处 ...

  7. 自定义圆的半径layout

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:too ...

  8. c++形参和实参同名时，如何单步执行观察形参的变化。

    c++形参和实参同名时,如何单步执行观察形参的变化? 方法:当程序运行到函数中时,添加变量观察即可.

  9. Allegro PCB SI （2）

    整理一下在电研院学的si (虽然彩超的si在频率15Mhz以上后,si是失真的.昨晚遇到孔大哥也是这样说的,板级仿真,要layout过硬,然后找到合适的top test point) Allegro ...

  10. explain分析查询

    参考以下文章,在此非常感谢原作者 explain分析查询