Jquery实现弹出层在对应div上方显示

来源：互联网发布：数据仿真技术编辑：程序博客网时间：2024/04/27 19:50

Html代码：

<html><head lang="en">   <meta charset="UTF-8">   <title></title>   <link rel="stylesheet"href="../css/popWindow.css"/>   <script type="text/javascript"src="../js/jquery-2.2.3.min.js"></script>   <script type="text/javascript"src="../js/popWindow.js"></script></head><body><div class="le-btn"id="div1"></div><div class="re-btn"id="div2"></div></body></html>

Css样式：

.le-btn{   width: 100px;   height: 100px;   border-radius: 10px;   background-color: #00BCD4;   cursor: pointer;   margin-top: 300px;   margin-left: 300px;   float: left;}.re-btn{   float: left;   width: 100px;   height: 100px;   border-radius: 10px;   background-color: #00BCD4;   cursor: pointer;   margin-top: 300px;   margin-left: 300px;}

Jquery代码：

$(document).ready(function(){   $("#div1").click(function(){       popup("div1");   });   $("#div2").click(function(){       popup("div2");   });}); function popup(id){   var obj=document.getElementById(id);   var t='<div class="arror"id="pop">pop</div>';   $(t).appendTo("body");   $(".arror").css("width",30);   $(".arror").css("height",30);   $(".arror").css("position","absolute");   $(".arror").css("border-radius",4);   $(".arror").css("border","1px solid #858585");   varleft=(obj.getBoundingClientRect().left+(($("#"+id).width()-$(".arror").width())/2));   vartop=obj.getBoundingClientRect().top-$(".arror").height()-10;    $(".arror").css("left",left);   $(".arror").css("top",top);}

效果展示：

0 0