javascript - 在移动网站的相应 div 前面打开弹出窗口

Question

我有一个移动网站设计，其中 90% 宽的圆形框垂直堆叠。由于其动态内容，每个圆 Angular 框的高度从 480px 到 800px 不等..它在单击时显示弹出窗口...弹出窗口高度同样从 480px 到 800px..并且弹出窗口应该出现在相应圆框的正前方。我通过为每个弹出窗口提供单独的 ID 并将其定位为绝对来做到这一点。问题是移动网站有大约 38 个带有弹出窗口的圆形框...我必须创建 38 个 ID 并为每个弹出窗口应用 css 定位。有没有更好的方法来实现这一点？

在这里检查 fiddle http://jsfiddle.net/4eLfq4u7/

<div class="rounded_box" id="one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ducimus tempora deserunt repellat architecto adipisci. Nulla est voluptatem, expedita possimus veniam tempora voluptate inventore eius
    </p>

Answer 1

更改您的 html 以制作如下内容:

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

然后你的 js 可以这样工作:

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

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

请参阅工作 fiddle :http://jsfiddle.net/4eLfq4u7/1/