按钮下方弹出层

<html>
	<head>
<SCRIPT>
function show(){
	window.event.cancelBubble = true
	var divId=document.getElementById("div1");
	var ob=document.getElementById("sss");
  
	var rd=getPosition(ob);
	
    
	divId.style.left=rd.x;
	divId.style.top=rd.y+ob.offsetHeight;
	divId.style.width=ob.offsetWidth;
	divId.style.heigth="800";
	divId.style.background = '#FFFFFF';
	divId.style.display="block";
}
function hideDiv(){
	var divId=document.getElementById("div1");
	if(!checkEventObj(event.srcElement,"div1"))
		divId.style.display="none";
}
function checkEventObj(obj,idName){
	if(obj.tagName == "BODY"){ return false; }
	if(obj.id == idName){ return true; }
	else{ return checkEventObj(obj.parentElement, idName); }
}


// 得到对象的绝对坐标
function getPosition(htmlObj){
   
    var  rd = {x:0,y:0};
    while(htmlObj)
	{  
        rd.x  +=  htmlObj.offsetLeft;   
        rd.y  +=  htmlObj.offsetTop;
        htmlObj= htmlObj.offsetParent;
    }
    
	return  rd;
}


</SCRIPT>
		
	</head>
	<body onclick =hideDiv()>
		 <input type="button" id="sss" value="testddddd" onclick="show()"/>
		 <div id="div1" style="display:none;
BORDER: #000 1px solid;
POSITION: absolute;
">
		  
		  ss<br>
		  bb<br>
		  cc<br>
		  cc<br>
		  cc<br>
		   	
		 </div>
	</body>
</html>


你可能感兴趣的:(按钮)