弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。
1，html部分

<!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>弹出窗口_www.jbxue.com</title>

<link type="text/css" rel="stylesheet" href="window.css">

<script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>

<script language="javascript" type="text/javascript" src="window.js"></script>

<script language="javascript">

$(document).ready(function (){

$("#btn_center").click(function (){

$(window).scroll(function (){

popcenterWindow();

});

});

$("#btn_right").click(function (){

$(window).scroll(function (){

poprightWindow();

});

});

$("#btn_left").click(function (){

$(window).scroll(function (){

popleftWindow();

});

});

});

</script>

</head>

<body>

<input type="button" value="弹出居中的窗口" id="btn_center">

<input type="button" value="弹出居右的窗口" id="btn_right">

<input type="button" value="弹出居左的窗口" id="btn_left">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="window" id="center">

<div class="title"><img src="close.gif">csdn欢迎您</div>

<div class="content">哈哈哈哈哈哈哈</div>

</div>

<div class="window" id="right">

<div class="title"><img src="close.gif">csdn欢迎您</div>

<div class="content">哈哈哈哈哈哈哈</div>

</div>

<div class="window" id="left">

<div class="title"><img src="close.gif">csdn欢迎您</div>

<div class="content">哈哈哈哈哈哈哈</div>

</div>

</body>

</html>

2，js代码部分

<script>

//窗口的高度

var windowHeight;

//窗口的宽度

var windowWidth;

//弹窗的高度

var popHeight;

//弹窗的宽度

var popWidth;

//滚动条滚动的高度

var scrollTop;

//滚动条滚动的宽度

var scrollleft;

//延时的时间

var timeout;

function init(){

//获得窗口的高度

windowHeight=$(window).height();

//获得窗口的宽度

windowWidth=$(window).width();

//获得弹窗的高度

popHeight=$(".window").height();

//获得弹窗的宽度

popWidht=$(".window").width();

//获得滚动条的高度

scrollTop=$(window).scrollTop();

//获得滚动条的宽度

scrollleft=$(window).scrollLeft();

}

//定义关闭窗口

function closeWindow(){

$(".title img").click(function (){

$(this).parent().parent().hide("slow");

});

}

//定义弹出窗口的方法

function popcenterWindow(){

//先清空上一次的延迟

clearTimeout(timeout);

timeout=setTimeout(function (){

init();

var popY=(windowHeight-popHeight)/2+scrollTop;

var popX=(windowWidth-popWidht)/2+scrollleft;

$("#center").animate({top:popY,left:popX},300).show("slow");},300);

closeWindow();

}

function popleftWindow(){

clearTimeout(timeout);

timeout=setTimeout(function (){

init();

var popY=windowHeight+scrollTop-popHeight-10;

var popX=scrollleft-5;

$("#left").animate({top:popY,left:popX},300).show("slow");},300);

closeWindow();

}

function poprightWindow(){

clearTimeout(timeout);

timeout=setTimeout(function (){

init();

var popY=windowHeight-popHeight+scrollTop-10;

var popX=windowWidth-popWidht+scrollleft-10;

$("#right").animate({top:popY,left:popX},300).show("slow");},300);

closeWindow();

}

</script>

3，CSS代码部分

.window{

width:250px;

background-color:#3FF;

padding:2px;

margin:5px;

position:absolute;

display:none;

}

.content{

height:150px;

background-color:#FFF;

padding:2px;

font-size:14px;

overflow:auto;

}

.title{

padding:2px;

color:#999;

font-size:14px;

}

.title img{

float:right;

cursor:pointer;

}
 

Js控制弹窗实现在任意分辨率下居中显示的更多相关文章

  1. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  2. JS控制TABLE表格在任意一行下面添加一行（有待完善）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. android studio 查看预览所有屏幕分辨率下的显示

    你可以打开在窗口的右侧预览面板设置上的布局.你可以通过修改面板顶部面板改变各种选项来修改预览,包括预览设备,主题,平台版本等等,可以同时预览多个设备上布局,可以从“设备”选项中下拉”预览所有屏幕的尺寸 ...

  4. js（window.open）浏览器弹框居中显示

    <span style="background-color: rgb(204, 204, 204);"><html> <meta name=" ...

  5. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  6. MFC不同分辨率和缩放下正常显示的方法

    方法1:为了满足Windows操作系统上不同分辨率下的显示,我们在OnPaint中重绘.

  7. Node.js在任意目录下使用express命令‘不是内部或外部命令’解决方法

    1.一开始我只能在nodejs全局目录下使用express命令建一个新的项目,建在其他任意一个目录命令行都会提示"不是内部或外部命令",导致目录会乱,目录如下. 2.尝试了一会,发 ...

  8. Screenfly – 各种设备的屏幕和分辨率下快速测试网站

    Screenfly 让你能够在各种设备的屏幕和分辨率下查看你的网站.输入网址,并点击GO开始浏览网页.Screenfly 可以使用代理服务器来模拟设备,当您查看您的网站,代理服务器模仿您所选择的设备的 ...

  9. 用js控制css属性

    在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...

随机推荐

  1. Office EXCEL VBA数组如何使用

    Excel VBA数组入门教程 1. 前言:不要把VBA数组想的太神秘,它其实就是一组数字而已. 2. 数组的维数: Sub 数组示例()  Dim x As Long, y As Long  Dim ...

  2. Python编程 - json字符串的解析

    import json jsonString = '{"arrayOfNums":[{"number":0},{"number":1},{& ...

  3. 高德地图引入库错误std::string::find_first_of(char const*, unsigned long, unsigned long) const"

    一:std:编译器错误解决 二:错误提示 "std::string::find_first_of(char const*, unsigned long, unsigned long) con ...

  4. Effective C++ 38-42

    38.绝不要又一次定义继承而来的缺省參数值. 又一次定义函数缺省參数值意味着又一次定义函数.而非虚函数不能又一次定义,所以将就考虑不能又一次定义虚函数的缺省參数值的原因:虚函数是动态绑定的而缺省參数值 ...

  5. Fiddler Session标志

    Each Session object in Fiddler contains a collection of string flags, in the Session.oFlags[] collec ...

  6. Linux rpm安装MySQL

    1:查看操作系统信息 ##uname -a : 准备软件包: MySQL-server-5.6.19-1.rhel5.x86_64.rpm MySQL-devel-5.6.19-1.rhel5.x86 ...

  7. C语言位域精解（转）

    有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态,用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一种数据结构, ...

  8. vs2013没有代码提法的一种解决办法

    把这两个勾去掉,然后关掉vs再打开,最后重新勾选上就行了.

  9. sql遍历全部数据集

    DECLARE @a int set @a = 1 while @a < 5 BEGIN select top(1) * from QPShuGameMatchDB..MatchScoreSta ...

  10. 2014年，daliu_it 年末文章汇总清单

    一.javabase 1. Windows环境下JDK安装与环境变量配置 详细的介绍了JDK的安装以及配图,同时安装的注意事项. 2. 项目的命名规范,为以后的程序开发中养成良好的行为习惯 详细的介绍 ...