用純粹的js實現彈出框效果和蒙版(mask)

有一個頁面的調用不了jquery，我選擇用純粹的javascript來實現一個交互效果。

要求是這樣的，點擊一個圖標后，彈出一個二維碼圖片，彈出的位置是在鼠標的周圍。

原理是這樣的：先彈出一個mask 也就是一個div 設置他的z-index屬性 再彈出輸入框，他的z-index屬性要大於mask的。

至於如何彈出在鼠標的周圍，我提取了鼠標事件，並且兼顧了各種瀏覽器。

<script type="text/javascript">
function WeChatShow(){
var height = document.body.scrollHeight;
var width = document.body.scrollWidth;
var weChatMask = document.getElementById("weChatMask");    
weChatMask.style.display="block";
weChatMask.style.position="absolute";
weChatMask.style.display="block";
weChatMask.style.zIndex = "8888";
weChatMask.style.width=width+"px";
weChatMask.style.height=height+"px";
weChatMask.style.background="white";
weChatMask.style.opacity="0.5";    
var evt = event || window.event;
var event = getMousePos(evt);
var weChatPop = document.getElementById("pop-up-wechat");
weChatPop.style.top= (event.y-400)+"px";
weChatPop.style.left= (event.x+200)+"px";
weChatPop.style.display="block";
weChatPop.style.zIndex = "9999";
weChatPop.style.opacity="1";
}

function hideWeChat(){

var weChatMask = document.getElementById("weChatMask");
var weChatPop = document.getElementById("pop-up-wechat");
weChatMask.style.display="none";
weChatPop.style.display="none";
}

//Firefox支持屬性pageX,與pageY屬性，這兩個屬性已經把頁面滾動計算在內了, 
//在Chrome可以通過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移， 
//而在IE下可以通過document.documentElement.scrollLeft ，document.documentElement.scrollTop 
function getMousePos(event) { 
var e = event || window.event; 
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; 
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
var x = e.pageX || e.clientX + scrollX; 
var y = e.pageY || e.clientY + scrollY; 
//alert('x: ' + x + '\ny: ' + y); 
return { 'x': x, 'y': y }; 
}


</script>

//彈出的mask

<div id='weChatMask' ></div>

//彈出的輸入框

<div id='weChatPop'></div>