<!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>
时间： 2024-10-06 09:17:02