弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。
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. USACO humble

    用set构造,优先队列和堆也能够 /* ID:kevin_s1 PROG:humble LANG:C++ */ #include <iostream> #include <cstdi ...

  2. maven command to create your application

    How do I make my first Maven project? We are going to jump headlong into creating your first Maven p ...

  3. Excel只能输入不许修改

        昨天出差,用户有个需求:需要他人录入数据,为了防止已经录入的数据被修改(录入数据由多方完成),必须限定只能输入,不能修改(修改时需要密码),最开始的方案是各设置一个密码,但如果他们相互之间联合 ...

  4. STL - 容器 - Deque

    Deque和Vector类似,只不过deque头尾都开放,能够在头尾进行快速插入和删除操作 DequeTest.cpp #include <iostream> #include <d ...

  5. 微信小程序 - 各种示例

    示例更新(后续持续更新): 最后一次更新:2018-11-7 小程序-地图显示(调用高德地图.腾讯App) - (2018-11-1) 小程序-上传图片(上传.预览.展示.删除) - (2018-11 ...

  6. Hibernate(九)HQL查询

    一.Hibernate提供的查询方式 OID查询方式:主键查询.通过get()或者load()方法加载指定OID的对象查询结果为一个 HQL查询方式:通过Query接口使用HQL语言进行查询 QBC查 ...

  7. interllij13新建maven web工程

    1. 打开intellij,左边的可以别管它(历史) ②选择create new project(新建一个项目),选择Maven,并选择一个web模板,然后next. 3. 给自己的项目取名,grou ...

  8. Fiddler SessionFlags

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

  9. Edge/Chrome/火狐/Safari/Opera和IE

    据DigitalTrends网站报道,谷歌Chrome浏览器性能远超竞争对手的时代已经成为过去.目前流行的浏览器水平基本相当.IE 11被Windows 10中的Edge浏览器取而代之.Mozilla ...

  10. Guava学习之Preconditions

    在编写程序的时候,很多时候都需要检查输入的参数是否符合我们的需要,比如人的年龄需要大于0,名字不能为空:如果不符合这两个要求,我们将认为这个对象是不合法的,这时候我们需要编写判断这些参数是否合法的函数 ...