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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
js实现日历的简单算法
Jan 24 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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 ajax 分页类代码
2008/11/13 PHP
php 无法载入mysql扩展
2010/03/12 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
php开发环境配置记录
2011/01/14 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Apache部署Django项目图文详解
2019/07/30 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
三字经教学反思
2014/04/26 职场文书
英语教育专业自荐信
2014/05/29 职场文书
环保建议书作文300字
2015/09/14 职场文书
php引用传递
2021/04/01 PHP
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
Python使用pyecharts控件绘制图表
2022/06/05 Python