js弹出层永远居中实现思路及代码


Posted in Javascript onNovember 29, 2013

弹出层窗口永远居中

<script type="text/javascript"> 
var isIE=window.XMLHttpRequest?false:true; 
var aIsIE={}; 
window.onload=function(){ 
if(isIE){ 
window.onscroll=doIE; 
window.onresize=doIE; } 
function doIE(){ 
aIsIE.top=document.documentElement.scrollTop; 
aIsIE.left=document.documentElement.scrollLeft; 
var width=document.documentElement.clientWidth; 
var height=document.documentElement.clientHeight; 
var oDiv=document.getElementById("oneReply"); 
oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px'; 
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px'; </script>

首先大家要了解一个不兼容的css样式position:fixed;

Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。

我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。

position:static 无定位该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。如:#nav { position:static; } 其他两种前面提过,我们 主要说的是fixed position:fixed 相对于窗口的固定定位这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。请特别注意,IE6不支持……

这里我们用position:fixed;+ “hack技术” +“javascript”;结合来解决这一问题
js弹出层永远居中实现思路及代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/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>图胜前端工程师</title> 
< style type="text/css"> 
body,div{margin:0; padding:0;} 
#a{width:200px;height:200px;background:blue;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;} 
< /style> 
< script type="text/javascript"> 
var isIE=window.XMLHttpRequest?false:true; 
var aIsIE={}; 
window.onload=function(){ 
if(isIE){ 
window.onscroll=doIE; 
window.onresize=doIE; } 
function doIE(){ 
aIsIE.top=document.documentElement.scrollTop; 
aIsIE.left=document.documentElement.scrollLeft; 
var width=document.documentElement.clientWidth; 
var height=document.documentElement.clientHeight; 
var oDiv=document.getElementById("a"); 
oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px'; 
oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script> 
< /head> 
< body style="width:100%;"> 
< div id="a"></div> 
< 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/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
< /body> 
< /html>
Javascript 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
根据表格中的某一列进行排序的javascript代码
Nov 29 #Javascript
JS取文本框中最小值的简单实例
Nov 29 #Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 #Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 #Javascript
JS求平均值的小例子
Nov 29 #Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 #Javascript
JS小功能(button选择颜色)简单实例
Nov 29 #Javascript
You might like
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
angularJS 入门基础
2015/02/09 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
react build 后打包发布总结
2018/08/24 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
如何基于python实现归一化处理
2020/01/20 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
实习生自我鉴定
2013/12/12 职场文书
自荐书4要点
2014/01/25 职场文书
教学器材管理制度
2014/01/26 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
技术经济专业求职信
2014/09/03 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
叶问观后感
2015/06/15 职场文书
公司业务员管理制度
2015/08/05 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书