有一個頁面的調用不了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>