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数组字符串拼接的最快方法
Sep 16 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
移动端界面的适配
Jan 11 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 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引用
2015/02/22 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
商务助理岗位职责
2013/11/13 职场文书
公司财务工作总结的自我评价
2013/11/23 职场文书
运动会宣传口号
2014/06/09 职场文书
铅球加油稿100字
2014/09/26 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Django实现聊天机器人
2021/05/31 Python
Python包argparse模块常用方法
2021/06/04 Python