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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
详解Layer弹出层样式
Aug 21 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
js闭包和垃圾回收机制示例详解
Mar 01 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php错误日志简单配置方法
2016/07/11 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python实现简单购物商城
2016/05/21 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python extract及contains方法代码实例
2020/09/11 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
家长对孩子的感言
2014/03/10 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫