按钮下方弹出层

最新推荐文章于 2022-08-08 11:53:00 发布

penghuaiyi2008

最新推荐文章于 2022-08-08 11:53:00 发布

阅读量146

点赞数

分类专栏： JavaScript总结

本文链接：https://blog.csdn.net/penghuaiyi2008/article/details/83529004

版权

JavaScript总结专栏收录该内容

44 篇文章 0 订阅

订阅专栏


<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>

penghuaiyi2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
按钮下方弹出层

[code="java"] function show(){ window.event.cancelBubble = true var divId=document.getElementById("div1"); var ob=document.getElementById("sss"); var rd=getPosition(ob); ...
复制链接

扫一扫

专栏目录