一直都在想怎么样使弹出的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. GAN作用——在我做安全的看来,就是做数据拟合、数据增强

    from:https://www.zhihu.com/question/56171002/answer/155777359 GAN的作用,也就是为什么GAN会火了(有部分原因可能是因为Lecun的赞赏 ...

  2. Solr集群安装

    1.JDK安装版本:jdk1.8.0 安装原文件路径:10.58.111.35(10.58.111.36.10.58.111.44)堡垒机 [/opt/jdk-8u101-linux-x64.tar. ...

  3. 如何切换到自定义的Activity

    一. 新建一个空的工程,并添加一个按钮 二.新建一个布局文件,命名为my_aty, 并添加一个文本 三.新建一个类,命名为MyAty,并重写onCreate函数 public void onCreat ...

  4. sqlserver数据库脱机时发生异常:由于无法在数据库 'SMS' 上放置锁,ALTER DATABASE 失败。请稍后再试。 ALTER DATABASE 语句失败。 (.Net SqlClient Data Provider)

    sqlserver数据库脱机时发生异常,如下: =================================== 设置脱机 对于 数据库“SMS”失败.  (Microsoft.SqlServe ...

  5. iis不能访问html

    在iis中配置好虚拟目录后,打开目录下的一个html文件,发现不是按照预想的输出,查看源代码后发现代码是: <html><head></head><body& ...

  6. 探索Javascript 异步编程

    在我们日常编码中,需要异步的场景很多,比如读取文件内容.获取远程数据.发送数据到服务端等.因为浏览器环境里Javascript是单线程的,所以异步编程在前端领域尤为重要. 异步的概念 所谓异步,是指当 ...

  7. C++静态数据成员实现

    静态数据成员是在一个类中用关键字static声明的数据成员.在C++中,一般使用静态成员来代替C语言的全局变量,以达到数据共享.C和C++的全局变量有一定的局限性,可以任意被修改,也容易和其它的变量名 ...

  8. Mac OS X显示隐藏文件命令

    defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder //显示隐藏文件 defaults wr ...

  9. ARP表 MAC表 路由表

    ARP表是一个动态表,存储在计算机当中,目的是做一个ip地址与mac地址的对应.假设在同一子网段,计算机A与计算机B通信计算机A的ip地址192.168.0.1 MAC地址AA-AA-AA-AA-AA ...

  10. Google搜索被屏蔽,如何使用Google搜索

    我们在国内使用搜索引擎最多的是Google和Baidu啦,在引擎上找一些我们需要的知识,最近好像www.google.cn已经无法访问了,并且香港的链接www.google.com.hk也无法访问了, ...