<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ display: block; border:2px solid darkseagreen; background-color: greenyellow; color: gray; font-size: 14px; width: 126px; height: 76px; position: absolute; padding: 5px; /*top: 14px;*/ /*left: 0px;*/ } .top{ display: block; position: absolute; top: -14px; left: 57px; border-bottom: 14px solid darkseagreen; border-left: 8px solid transparent; border-right: 8px solid transparent; } .right{ display: block; position: absolute; right: -14px; top: 32px; border-bottom: 8px solid transparent; border-left: 14px solid darkseagreen; border-top: 8px solid transparent; } .left{ display: block; position: absolute; left: -14px; top: 32px; border-bottom: 8px solid transparent; border-right: 14px solid darkseagreen; border-top: 8px solid transparent; } .bottom{ display: block; position: absolute; bottom: -14px; left: 57px; border-top: 14px solid darkseagreen; border-left: 8px solid transparent; border-right: 8px solid transparent; } </style> </head> <body> <!--/*在文档中随意点击（充当对按钮的点击）显示弹框呈现样式*/--> <div> <p>随意点击弹出我，看看我有什么不同？</p> <span class="top"></span> </div> <script> document.onclick = clickStat; function clickStat() { //确定点击位置 var e = arguments[0] || window.event; var x = e.clientX; var y = e.clientY; var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var o = { top: (y), left: (x), bottom: (h-y), right: (w-x) }; alert("w="+w+";h="+h+";left="+ o.left+";"+"top="+ o.top+";"+"right="+ o.right+";"+"bottom="+ o.bottom); //设置弹框显示样式 var popdiv = document.getElementsByTagName('div')[0]; var arrowSpan = document.getElementsByTagName('span')[0]; var popdivStyle = document.defaultView.getComputedStyle(popdiv, null); var arrowSpanStyle = document.defaultView.getComputedStyle(arrowSpan, null); var popH = parseFloat(popdivStyle.height.slice(0,-2))+14; var popW = parseFloat(popdivStyle.width.slice(0,-2))+14; // var arrowTop = parseFloat(arrowSpanStyle.top.slice(0,-2)); // var arrowLeft = parseFloat(arrowSpanStyle.left.slice(0,-2)); //判断弹框箭头的方向和箭头在弹框上的位置 var topflag = 0,leftflag = 0,rightflag = 0,bottomflag = 0; if(o.bottom > popH){ topflag = 1; if(o.right > popW && o.left <= popW){ topflag = 0; leftflag = 1; }else if(o.right<=popW){ topflag = 0; rightflag = 1; }else{ topflag = 1; } }else{ bottomflag = 1; } alert("topflag="+topflag+";leftflag="+leftflag+";rightflag="+rightflag+";bottomflag"+bottomflag); if(bottomflag){ arrowSpan.setAttribute("class","bottom"); popdiv.style.top = (o.top-popH)+"px"; popdiv.style.left = o.left+"px"; arrowSpan.style.top = "87px"; }else if(leftflag){ arrowSpan.setAttribute("class","left"); popdiv.style.left = (o.left+14)+"px"; if(o.top<40){ popdiv.style.top = "0px"; arrowSpan.style.top = (o.top-8)+"px"; }else{ popdiv.style.top = (o.top-40)+"px"; arrowSpan.style.top = "32px"; } }else if(rightflag){ arrowSpan.setAttribute("class","right"); popdiv.style.left = (o.left-popW-12)+"px"; if(o.top<40){ popdiv.style.top = "0px"; arrowSpan.style.top = (o.top-8)+"px"; }else{ popdiv.style.top = (o.top-40)+"px"; arrowSpan.style.top = "32px"; } }else{ arrowSpan.setAttribute("class","top"); popdiv.style.top = (o.top+14)+"px"; popdiv.style.left = o.left+"px"; arrowSpan.style.top = "-14px"; } // popdiv.style.display = popdiv.style.display=='none'?'block':'none'; // } </script> </body> </html>
