js弹出层永远居中实现思路及代码_javascript技巧

弹出层窗口永远居中

复制代码 代码如下:

<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>

时间: 2024-11-16 05:58:42

js弹出层永远居中实现思路及代码_javascript技巧的相关文章

JS弹出层的显示与隐藏示例代码_javascript技巧

复制代码 代码如下: <!--弹出层的显示与隐藏--> <script type="text/javascript"> //弹出层的显示 //overlays:为遮罩层的ID //wins:弹出层窗体的ID //弹出层中用于拖动的ID function popDIV_show(overlays,wins,wins_title) { var oLays = documentgetElementById(overlays); var oWins = document

js弹出层(jQuery插件形式附带reLoad功能)_javascript技巧

之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下: 复制代码 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width

js写一个弹出层并锁屏效果实现代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JS弹出层的显示与隐藏示例代码

 关于JS弹出层的显示与隐藏,在网上可以搜到很多的类似教程,本文实现了一下,喜欢的朋友不要错过 代码如下: <!--弹出层的显示与隐藏-->  <script type="text/javascript">  //弹出层的显示  //overlays:为遮罩层的ID  //wins:弹出层窗体的ID  //弹出层中用于拖动的ID  function popDIV_show(overlays,wins,wins_title) {  var oLays = docu

JS控制弹出悬浮窗口(一览画面)的实例代码_javascript技巧

在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu

AlertBox 弹出层信息提示框效果实现步骤_javascript技巧

在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题. 此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新"包装",程序也改成组件的结构. 兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 http://demo.jb51.net/js/AlertBox/index.htm 程序说明 [实现原理] 弹出层的基本原理在仿Lightbox效果中已

js 弹出虚拟键盘修改密码的简单实例_javascript技巧

实例如下: //定义当前是否大写的状态 window.onload= function() { password1=null; initCalc(); } var CapsLockValue=0; var check; function setVariables() { tablewidth=630; // logo width, in pixels tableheight=20; // logo height, in pixels if (navigator.appName == "Netsc

javascript实现的弹出层背景置灰-模拟(easyui dialog)_javascript技巧

页面比较丑,只把功能实现了.^ ^ 复制代码 代码如下: <title>模仿easyui dialog的效果</title> <script> //取得页面元素 var getElement = function() { return document.getElementById(arguments[0]) || false; } function openDialog(dialogId) { var maskId = "mask"; //如果有,

让js弹出窗口居前显示的实现方法_javascript技巧

具体步骤: 方法一:弹出窗口<body>里加上代码:onblur="self.focus()":<body onblur="self.focus()"> 方法二:用showModalDialog方法建立模式对话框,它的参数说明如表1.5.2所示.<script>   function topwin(){   window.showModalDialog(http://www.jb1.net,"","d