Javascript 为移动网站打开相应div前面的poup

我有一个移动网站的设计，它有90%的宽圆形框垂直堆叠。 由于其动态内容，每个圆形框的高度在480px到800px之间变化。单击时显示弹出窗口。弹出窗口的高度在480px到800px之间变化。弹出窗口应显示在相应圆形框的正前方。为此，我为每个弹出窗口提供了单独的ID，并将其定位为绝对值。 问题是移动站点有大约38个圆形框和弹出框…我必须创建38个ID，并为每个弹出框应用css定位。。有没有更好的方法来实现这一点

检查这里的小提琴

Lorem ipsum dolor sit amet，奉献精英。地点：阿迪皮斯建筑事务所。不属于发明者，不属于发明者

更改html，使其类似于：

<div class="wrapper">
  <div class="roundedBox"></div>
  <div class="popup"></div>
</div>

根据你的css，因为绝对定位也是相对于它的父项的，你不需要通过id定位每个弹出窗口

参见工作小提琴：

<div class="wrapper">
  <div class="roundedBox"></div>
  <div class="popup"></div>
</div>

$(".wrapper").click(".roundedBox", function () {
     $(".popup", this).toggle();
});