一直都在想怎么样使弹出的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其实可以一般化?

最新文章

  1. ZeroMQ接口函数之 :zmq_msg_size - 以字节为单位返回消息内容的大小
  2. C#入门随手笔记
  3. Sublime Text shift+ctrl妙用
  4. Become a Windows Insider and Test New Windows 10 Features
  5. 安装android studio时,解决unable to access android sdk add-on list
  6. Instruments性能检测
  7. 再来写一个随机数解决方案,对Random再来一次封装
  8. angular JS中使用jquery datatable添加checkbox点击事件
  9. zookeeper curator处理会话过期session expired
  10. Pthread 用法笔记
  11. python中的多重循环
  12. Perhaps you are running on a JRE rather than a JDK
  13. Django框架----模板继承和静态文件配置
  14. HashMap 源码解析(一)之使用、构造以及计算容量
  15. ActiveMQ + NodeJS + Stomp 入门
  16. 多实例部署多个tomcat
  17. 【iOS开发-33】学习手动内存管理临时抛弃ARC以及retain/assign知识——iOSproject师面试必考内容
  18. Python函数(一)-return返回值
  19. Linux ELF格式分析
  20. 分布式文件系统FastDFS集群部署

热门文章

  1. MySQL连接中出现大量的 init 状态问题
  2. MS SQL GUID
  3. MongoCola使用教程 1 - MongoDB的基本操作和聚合功能---Mongdb客户端软件操作说明
  4. windows ubuntu Android studio安装好启动没反应解决方法
  5. Linux使用lrzsz上传下载文件
  6. 使用Metasploit收集邮箱信息
  7. OpenCV - 图片二值化,计算白色像素点的个数
  8. rebar自定义template
  9. ul li 水平居中
  10. UI多线程调用:线程间操作无效: 从不是创建控件"Form1"的线程访问它.