弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。
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. TotalCommander如何比较文件夹并提取出重复的文件

    1 如图所示,我左侧有一万本多小说,右侧有两千五百多本小说,我希望比较这两个文件夹相同的小说并剪切到一个新的文件夹中. 2 我们使用Total Commander对比这两个文件夹 3 随后两个文件夹相 ...

  2. HTTP.SYS 远程执行代码漏洞分析（MS15-034 ）

    在2015年4月安全补丁日,微软发布了11项安全更新,共修复了包括Microsoft Windows.Internet Explorer.Office..NET Framework.Server软件. ...

  3. 触发器二(DML触发器)(学习笔记)

    DML触发器(语句触发器) 由DML语句进行触发,当用户执行了INSERT,UPDATE,DELETE操作时就会触发操作 示例一.只有在每个月的10日才允许办理,新员工入职与离职,其他时间不允许增加和 ...

  4. java统计abacbacdadbc中的每个字母出现的次数，输出格式是：a(4)b(3)c(3)d(2)

    import java.util.Iterator; import java.util.Map; import java.util.Set; import java.util.TreeMap; /* ...

  5. 【Docker】常用命令

    1.查看正在运行的容器 [root@localhost ~]# docker ps CONTAINER ID        IMAGE               COMMAND            ...

  6. 零基础学软件测试V2.0

    关于本教程 本系列是在之前的基础上进行了修改更新,原来的内容显得过于简单,但都是重点,这次对于过于简单部分增加了更详细的内容. 目前国内越来越重视软件测试,人才的缺口也是比较大的,为了帮助大家快速的学 ...

  7. PAT 1086 Tree Traversals Again

    PAT 1086 Tree Traversals Again 题目: An inorder binary tree traversal can be implemented in a non-recu ...

  8. PAT 1085 Perfect Sequence

    PAT 1085 Perfect Sequence 题目: Given a sequence of positive integers and another positive integer p. ...

  9. C#将Access数据库导出为JSON

    一个Access数据库包含若干首诗歌,每首诗有content.author.title.description四个字段 using System; using System.Data; using S ...

  10. java开发_eclipse导出为war文件，热部署到tomcat运行总结[转]

    在Myeclipse中,我们很容易做到这一步:把一个web项目生成war文件 其实在eclipse中,实现这样的功能,也是很简单的. 下面就看一下是怎样操作的吧! 新建一个web项目: 取名为:ecl ...