Js控制弹窗实现在任意分辨率下居中显示


Posted in Javascript onAugust 01, 2013

贴代码

<!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>弹出窗口_3water.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>

JS
//窗口的高度 
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(); 
}

CSS
<SPAN style="FONT-SIZE: 18px">.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; 
}</SPAN>
Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
JS canvas绘制五子棋的棋盘
May 28 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 #Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 #Javascript
Javascript 遮罩层和加载效果代码
Aug 01 #Javascript
JS防止用户多次提交的简单代码
Aug 01 #Javascript
纯文字版返回顶端的js代码
Aug 01 #Javascript
JS实现随机化快速排序的实例代码
Aug 01 #Javascript
js中的前绑定和后绑定详解
Aug 01 #Javascript
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
js比较日期大小的方法
2015/05/12 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
基于python中的TCP及UDP(详解)
2017/11/06 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Python super()函数使用及多重继承
2020/05/06 Python
在keras中实现查看其训练loss值
2020/06/16 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
学习型党组织建设经验材料
2014/05/26 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书