弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。
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. 4、Android Activity的生命周期 Activity的生命周期

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV4aWt1b18x/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  2. mac安装热更新插件

    查看.修改或者执行某些命令需要root用户的权限,如果不想直接切换到root用户,就可以使用sudo命令.sudo命令用于针对单个命令授予临时权限.sudo仅在需要时授予用户权限,减少了用户因为错误执 ...

  3. ubuntu 下安装配置open-iscsi并自动挂载

    1.安装open-iscsi apt-get install open-iscsi 2.发现iscsi-target(ISCSI服务器IP:192.168.1.104) iscsiadm -m dis ...

  4. Ubuntu12.04+OpenERP7.0安装笔记

    不经意的一次看到OpenERP这个开源ERP,就被其丰富的功能,简洁的画面,熟悉的语言所吸引.迫不及待的多方查询资料,自己架设一个测试环境来进行了解.以下为测试安装时候的步骤说明,以备查询,并供有需要 ...

  5. 【Linux】在Linux上查看并替换特殊字符

    现有windows上新建的一个txt文件file01.txt,内容如下: 我们通过ftp上传到Linux,在Linux下使用命令cat –A file01.txt查看文件内容发现该文件的结尾全是^M$ ...

  6. maven中央仓库

    https://search.maven.org (查看版本和文件列表:http://repo1.maven.org/maven2/) http://mvnrepository.com/ https: ...

  7. Oracle EBS WMS功能介绍（二）

    Oracle EBS WMS功能介绍(二) (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 出货物流逻辑主要包括 1.      打包.能够进 ...

  8. nginx error: upstream prematurely closed connection while reading response header from upstream

    本篇文章由:http://xinpure.com/nginx-error-upstream-prematurely-closed-connection-while-reading-response-h ...

  9. poj1611---The Suspects

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 19754   Accepted: 9576 Des ...

  10. 【LeetCode】146. LRU Cache

    LRU Cache Design and implement a data structure for Least Recently Used (LRU) cache. It should suppo ...