Question

我有一个移动网站设计，其中有90％宽的圆形盒子垂直堆叠。由于其动态内容，每个圆形框的高度从480px到800px不等。单击时显示弹出窗口...弹出窗口高度同样从480px到800px不等。弹出窗口应该出现在相应圆形框的正前方。我通过为每个弹出窗口分配单独的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>

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定位每个弹出窗口。

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

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

1 个答案: