按钮下方弹出层
编程技术 / houtizong 发布于 3年前 106
<html><head><SCRIPT>function show(){window.event.cancelBubble = truevar 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>
上一篇：XMLBeans学习总结
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
