DIV弹出层练习(一) ------------------ 用js实现在超链接的下方弹出div层

最新推荐文章于 2020-04-13 23:50:56 发布

UPC_思念

最新推荐文章于 2020-04-13 23:50:56 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： div function null border html c

本文链接：https://blog.youkuaiyun.com/zxingchao2009/article/details/5812753

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript在超链接下方精确弹出一个DIV层的方法。通过获取超链接的位置并调整弹出层的位置来实现这一效果。文章提供了完整的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思想主要是通过函数getAbsolutePos取得超连接的坐标，然后将其纵坐标加15，横坐标不变，以此坐标设置弹出div的top和left的属性，最后将新建的div通过document.body.appendChild加入到页面中，另外注意的是新弹出的div显示到前面是由于设置了其style的zIndex属性，这个很重要。<html> <head> <title>用js实现在超链接中的下方弹出div层</title> <script type="text/javascript"> </script> </head> <body> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <center><a id="zxc"style="cursor: pointer;text-decoration: underline;" onclick="openNewDiv('a','b','c')">放入购物车</a></center> <div id="c" style="display: none;" mce_style="display: none;"> <div style="border: 2px solid #BBBDBF width : 70; background-color: #BBBDBF"> <p> 你确定要放入购物车吗? </p> <br /> <center> <a style="cursor: pointer; text-decoration: underline;" mce_style="cursor: pointer; text-decoration: underline;" onclick="alert('success!')" ></a>确定</a> <a style="cursor: pointer; text-decoration: underline;" mce_style="cursor: pointer; text-decoration: underline;" onclick="removeDiv('a','b')">取消</a> </center> </div> </div> </body> </html>

效果图: