在移动网站的各个 div 前面打开弹出窗口答案

【问题标题】：Open poup infront of respective divs for mobile website在移动网站的各个 div 前面打开弹出窗口
【发布时间】：2015-03-11 03:27:54
【问题描述】：

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

在这里检查小提琴 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>

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

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

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

你的 js 可以这样工作：

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

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

查看工作小提琴：http://jsfiddle.net/4eLfq4u7/1/

【讨论】：