document.body和document.body的区别和兼容性&&js自定义弹框的方法

在整理遮罩层的时候发现为了兼容性让整体页面写成这样，

Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);

其实发现取宽高的两种方法都有

document.documentElement和document.body两种方法原因就是以html方式还是以xhtml方式解读的不同

因为ie8的时候在添加html5声明的时候还是XHTML得方式读取

但是在谷歌等浏览器就是html方式读取

在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

根本的解决方法是添加声明，声明时html4

宽高同理：

网页可见区域宽：document.body.clientWidth

html元素的宽高：document.body.offsetWidth

网页正文全文宽：document.body.scrollWidth

屏幕分辨率的宽：window.screen.width

遮罩层其实就是两个z-index比较大的div

一个为div的遮罩层，一个为弹框内容

遮罩层获取整个网页文本的大小

 document.body.scrollWidth

document.body.scrollHeight

第二点弹框内容永远在浏览器中间（左边或者上面滚动的距离）

sleft=document.body.scrollLeft 

top=document.body.scrollTop 

左边为showBox.style.left = sleft+(cwidth-Width)/2+"px";    cwidth就是可见区域的宽，Width弹框内容

上面的距离为showBox.style.top=(cheight-sbHeight)/2+top+"px";

 cheight就是可见区域的高，sbHeight弹框内容的高度