先看效果：
首先看实现思路：
第一步： 弹出一个遮罩层mask
遮罩层需要覆盖整个网页内容区域，所以很明显，它的宽度和高度就是整个内容区域的高度和高度。由于各浏览器的嗜好不同，有的浏览器把document.body.scrollHeight认为是整个内容区域的高度，而有的把document.documentElement.scrollHeight认为是整个内容区域的高度，不要纠结浏览器大战了，直接用Math.max搞定吧，反正记住大的那个就是了。
有了这个高度宽度，弹出这个遮罩就很easy了，只需要创建一个div，然后设置它的背景色，透明度，高度宽度，position为absolute，left、top为0就行了：
var canvasSize = { height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) , Math.max(document.body.scrollWidth, document.documentElement.scrollWidth) } mask = document.createElement('div'); mask.style.cssText = 'height: '+ canvasSize.height +'px; '+ canvasSize.width +'px; background-color: black; opacity: 0.5; position: absolute; top: 0px; left: 0px;'; document.body.appendChild(mask);
第二步：弹出一个垂直居中，水平也居中的层，并在这个层里插入内容
要实现这一步，我们需要得到可视区域的高度宽度，然后得到我们需要弹出的层的高度宽度，考虑再周到一点，得到当前滚动条的的位置，这样我们就能计算出来我们的弹出层的top和left值了。
可视区域高度宽度各个浏览器没啥争议，在标准里都是document.documentElement.clientHeight。这里可以documentElement理解成html标签，然后它的高度宽度就是可视区域高度宽度，body只是overflow了而已。
要得到弹出层的宽度高度，我首先把他的透明度设置为空（元素必须在display不为none且visible不为hidden时才能计算其高度宽度），然后再通过offsetHeight属性获得它的border盒子的高度，获得后在设置它的opacity为空即可。
至于滚动条的位置，各个浏览器也有争议，同上直接max即可：Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)。
至此，我们可以计算弹出层的top和left了。top=(可视区域高度-弹出层高度)/2 + scrollTop，left同理。
windowSize = { height: document.documentElement.clientHeight , document.documentElement.clientWidth }; var container=document.createElement('div') container.style.cssText = 'opacity:0;position:absolute;background-color:white'; document.body.appendChild(container); container.style.left = ((windowSize.width - container.offsetWidth) / 2 + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px'; container.style.top = ((windowSize.height - container.offsetHeight) / 2 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px'; container.style.opacity = '';
好了，剩下的就是在弹出窗口的function里把我们刚刚的实现整合起来就行了
完整代码如下：