HTML+CSS+JS实现点击超链接弹出文本框效果

Question

我点那个申请加入，弹出一个文本框，可输入文字的，我用的事绝对定位，所以点击左边那个申请加入和点击右边那个申请加入出现的文本框在同一个位置，怎么样可以使那个弹出的文本框位置在申请加入旁边。

Answer 1

出现这个问题，首先需要搞明白弹出框是只有一个，还是每个申请加入旁边都有一个。
如果是第二种情况，那就来说说绝对定位是如何进行定位的。
我们的说法是绝对定位，但其实是相对的，它需要一个相对基准点，来进行定位。如果绝对定位的父标签设置了属性position: relative;，那这个父标签就是它的基准点，相对于这个父标签的偏移量来绝对定位。如果所有的父标签都没有设置那个属性，那就不好办了，它会跑到最上面去，以body进行定位。明白了这个就好办了，给弹出框的父标签加上属性position: relative，再调整一下偏移量（就是left或right，top或bottom的值）就可以了。
为什么先说第二种情况呢？因为第一种情况比较麻烦，而且也要知道绝对定位是如何进行定位的才行。需要用JS判断点击的申请加入是哪一个，根据点击的这个按钮的位置来计算偏移量，再进行定位。
写了这么多字累了，才发现没有悬赏分。

追问

你说的这种方法我已经实现，这样子我要给每一个弹出框设置top和left的值，我现在想让做好第一个，然后复制个7、8个，我点每一个的申请加入，他弹出的窗口都在申请加入旁边，结果我现在是复制7、8个，点每一个的申请加入，弹出的窗口都在第一个申请加入旁边。

追答

那就是第二种情况了，原生JS我不是很清楚，Jquery中有个方法很好用offset()，用它可以获取到元素的偏移量，有两个值offset().top，offset().left，用这个方法获取到鼠标点击的申请加入的偏移量，再加上一个数字，然后赋值给弹出框，弹出框就会出现在你点的申请加入的旁边了

Answer 2

用$(this). 获取更靠谱一点。你可以试试，同时，绝对定位的元素若父元素也是定位的则不会出现这种情况。

Answer 3

 

自己算算吧

追问

恕我愚昧，这是神马？

追答

用这个，可以算出你那个“申请加入”的绝对位置，然后定位你的“弹出框”的位置

Answer 4

既然是设置的绝对定位，你给弹出的框的y加一个按钮的宽度就好了嘛。