用纯粹的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>

 

转载于:https://www.cnblogs.com/rgnh/p/4723974.html