js弹出层永远居中实现思路及代码
发布于 2017-06-27 21:28:57 | 120 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
弹出层永远居中的方法有很多，在本文为大家详细介绍下使用js是如何轻松实现的，喜欢的朋友可以参考下
弹出层窗口永远居中
<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”；结合来解决这一问题
<!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>
推荐阅读
最新资讯