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

2019-11-02 18:49   编辑:admin   人气: 次   评论(

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

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

  可选中1个或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个问题。

  展开全部出现这个问题,首先需要搞明白弹出框是只有一个,还是每个申请加入旁边都有一个。

  我们的说法是绝对定位,但其实是相对的,它需要一个相对基准点,来进行定位。如果绝对定位的父标签设置了属性position: relative;,那这个父标签就是它的基准点,相对于这个父标签的偏移量来绝对定位。如果所有的父标签都没有设置那个属性,那就不好办了,它会跑到最上面去,以body进行定位。明白了这个就好办了,给弹出框的父标签加上属性position: relative,再调整一下偏移量(就是left或right,top或bottom的值)就可以了。

  为什么先说第二种情况呢?因为第一种情况比较麻烦,而且也要知道绝对定位是如何进行定位的才行。需要用JS判断点击的申请加入是哪一个,根据点击的这个按钮的位置来计算偏移量,再进行定位。

  你说的这种方法我已经实现,这样子我要给每一个弹出框设置top和left的值,我现在想让做好第一个,然后复制个7、8个,我点每一个的申请加入,他弹出的窗口都在申请加入旁边,结果我现在是复制7、8个,点每一个的申请加入,弹出的窗口都在第一个申请加入旁边。那就是第二种情况了,原生JS我不是很清楚,Jquery中有个方法很好用offset(),用它可以获取到元素的偏移量,有两个值offset().left,用这个方法获取到鼠标点击的申请加入的偏移量,再加上一个数字,然后赋值给弹出框,弹出框就会出现在你点的申请加入的旁边了

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