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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM