JavaScript获取页面高度宽度 弹出层效果

新人第一次发帖，可喜欢可评论可转载

先来说一说获取页面高度宽度的问题

var sheight = document.documenElement.scrollHeight;   //获取页面的高度

var swidth = document.documentElelment.scrollWidth;    //获取页面的宽度

var cheight = document.documentElement.clientHeight;  //获取页面可视区域的高度

var cwidth= document.documentElement.clientWidth;  //获取页面可视区域的高度

页面高度指的是整个网页高度，就是在顶部到底部的长度

页面可是区域的高度指的是我们能看到的长度，如果你不改变浏览器的窗口大小和分辨率的大小，这个值一般是不会改变的。

页面的宽度就没什么好说的了，因为通常情况下 swidth = cwidth 。很少有网页能够左右拉动的。

然后在来说一说弹出层，这个看起来高大上实际上非常简单非常基础的东西，我学习的时候真的是泪流满面，曾经觉得这怎么这么难，看了原理之后这的是欲哭无泪。好吧，我是小白。

先来看看如果要做出弹出层需要知道的东西：

CSS:

position:fixed;
z-index:---;
opacity:0.5;//遮罩层层透明度
filter:alpha(opacity=50);//兼容IE
position:absolute;//绝对定位

Js：

var div = document.create('div');//创建节点
document.body.appendChild(div);//插入节点

说一说弹出层的原理，点击一个按钮时触发一个事件，这个事件新建了两个DOM节点，一个是遮罩层，一个是弹出框。通过设置遮罩层的透明度来实现背景变黑，将遮罩层的 z-index设置为100(比页面中其他元素的z-index)大就可以，弹出框的z-index设置为101(比遮罩层大)。通过点击遮罩层或者关闭按钮删除刚刚创建的节点。

最后,按照习俗该上代码了...

课程来自慕课网，后续会有更多类似特效，基本每天一个。