一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示位置。
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义:
document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现:
第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意:divId指的是所要居中的层,divId.clientWidth为其宽度!@
var divId = document.getElementByIdx("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left=v_left;
divId.style.top=v_top;
说明:divId为DIV标签的id值
这样这个层就是居中显示的了。
第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left=v_left;
divId.style.top=v_top;
这样显示出来就是居中的了。 fat注:那个document。body其实可以一般化?

js控制使div自动适应居中的更多相关文章

  1. js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js控制某个div在页面加载完成5秒后隐藏

    <div id="k">测试</div><script>setTimeout("document.getElementById('k' ...

  3. js控制iframe高度自动撑开

    <iframe src="index.html" width="100%" name="" id="myiframe&quo ...

  4. JS控制滚动条的位置

    转载▼http://blog.sina.com.cn/s/blog_4481a3460100rwwu.html     JS控制滚动条的位置:window.scrollTo(x,y); 竖向滚动条置顶 ...

  5. js控制div滚动条,滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  6. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  7. 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  8. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js 控制展开折叠 div html dom

    js 控制展开折叠 div    html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

随机推荐

  1. STL标准容器特征

    一. vector vector类是一种顺序容器,可以看作动态数组,容器中的元素存放在连续存储区域. vector容器自动分配.释放.扩展.收缩存储空间,不需要使用new或delete关键字. vec ...

  2. 设置Qt程序在Windows开机后自动运行

    (转自:http://blog.csdn.net/weiren2006/article/details/7443362) 主要原理是修改Windows的注册表来实现的,Qt的QSettings提供了访 ...

  3. 用工具快速建立hibernate框架

    ,一.建好项目后先导入两类jar包,一类是hibernate的jar包,一类是jdbc的jar包 二.点击“窗口”--“显示视图”--“其它”-“Hibernate configurations” 三 ...

  4. Python基础学习(第7天)

    第6课 1.循环对象:包括一个next方法,这个方法的目的是进行到下一个结果,结束后抛出StopInteration异常: 当循环结构如for循环调用一个循环对象时,每次循环的时候都会调用next方法 ...

  5. New Concept English three (43)

    30 54 Insurance companies are normally willing to insure anything. Insuring public or private proper ...

  6. 跟我学Delphi Xe4 开发 IOS 一 , 重读Delphi Xe4 自带文档.

    安装了 Delphi Xe4 之后打开这个地址就是完整的官方的文档了. 虽然不是立刻能解决你的问题. 但也是必须要看一遍的. 最基础的都在这里了. ms-help://embarcadero.rs_x ...

  7. Lua学习笔记(1)

    1.chunk是可以把Lua识别并执行的代码.chunk可以是单条语句,也可以是一系列语句的组合,还可以是函数,或是一个代码文件,交互模式下的每条指令(一行或多行)都是一个chunk交互模式下,判断指 ...

  8. python 使用sk_learn 遇到 问题ValueError: Expected 2D array, got 1D array instead:

    这里我找到我的问题是: 使用的是一个新的scikit学习版本,它抛出了一个错误,因为在新版本中,所有东西都必须是一个二维矩阵,甚至是一个列或行. 它甚至说:用数组来重塑你的数据.如果您的数据有一个单独 ...

  9. C#进阶之路(七)反射的应用

    反射在C#中的应用还是很多的,但它对代码的性能有一定影响. 反射的性能: 使用反射来调用类型或者触发方法,或者访问一个字段或者属性时clr 需要做更多的工作:校验参数,检查权限等等,所以速度是非常慢的 ...

  10. 组件与.NET互操作

    组件 1.何谓组件技术? 组件技术就是利用某种编程手段,将一些人们所关心的,但又不便于让最终用户去直接操作的细节进行了封装,同时对各种业务逻辑规则进行了实现,用于处理用户的内部操作细节,甚至于将安全机 ...