弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。
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. springboot项目启动报错

    启动springboot项目报错: NoSuchMethodError: org.apache.tomcat.util.scan.StandardJarScanner.setJarScanFilter ...

  2. Inside GDALAllRegister之四： 跳过driver

    这个函数很短小: /** * \brief This method unload undesirable drivers. * * All drivers specified in the space ...

  3. mac 终端 使用 solarized 主题设置语法高亮

    mac 终端 使用 solarized 主题设置语法高亮 先来看看 solarized 在 mac 终端上的效果图片 一:先下载 solarized 官网下载:https://github.com/a ...

  4. web应用程序访问串口

    https://github.com/tylermenezes/SerialServe https://github.com/straend/SerialWebsocket http://www.cn ...

  5. jquery.dataTables动态列

    jquery.dataTables  版本1.10.7 直接上代码: 0.table <table id="popReportTable"> <thead> ...

  6. 用Python读取大文件

    通常我们在读取文件的时候,会用到read(), readline(), readlines(). 通常可能会有这样的用法: def test1(): with open("/tmp/test ...

  7. bazel、tensorflow_serving、opencv编译问题

    1.出现该错误表示opencv冲突,该机器上有多个opencv版本. 解决方法:卸载低版本opencv 2.bazel中BUILD的写法: copts中放置-I/usr/include/.-D lin ...

  8. uploadify上传带参数及接收参数的方法

    function uploadify() { $("#uploadify").uploadify({ method:'post', uploader: '/Manage/Order ...

  9. html5之canvas画图 1.写字板功能

     写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代 ...

  10. Eclipse常用且不易记快捷键

    大小写转换:CTRL+SHIFT+X,Y 复制行:CTRL+ALT+↑,↓(部分无法使用) 查看继承关系:CTRL+T 直接查看系统源码:CTRL+SHIFT+T 查看所有快捷键:CTRL+SHIFT ...