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

Question

我有一个移动网站设计，其中 90% 宽的圆形框垂直堆叠。由于其动态内容，每个圆角框的高度从 480px 到 800px 不等..它在单击时显示弹出窗口...弹出窗口 window 高度同样从 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/

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

Open poup infront of respective divs for mobile website

javascript

jquery

html

css

jquery-mobile