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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
JavaScript Promise启示录
Aug 12 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
根据表格中的某一列进行排序的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
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php判断目录存在的简单方法
2019/09/26 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
python读取和保存视频文件
2018/04/16 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
EJB面试题
2015/07/28 面试题
师范生自荐信范文
2013/10/06 职场文书
办公室前台岗位职责
2014/01/04 职场文书
公积金转移接收函
2014/01/11 职场文书
优秀党员获奖感言
2014/02/18 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
歌剧魅影观后感
2015/06/05 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL