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

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

UPC_思念

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

阅读量2.7k

点赞数

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

本文链接：https://blog.csdn.net/zxingchao2009/article/details/5812753

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现思想主要是通过函数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;" οnclick="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;" οnclick="alert('success!')" ></a>确定</a> <a style="cursor: pointer; text-decoration: underline;" mce_style="cursor: pointer; text-decoration: underline;" οnclick="removeDiv('a','b')">取消</a> </center> </div> </div> </body> </html>

效果图:

UPC_思念

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
DIV弹出层练习(一) ------------------ 用js实现在超链接的下方弹出div层

实现思想主要是通过函数getAbsolutePos取得超连接的坐标，然后将其纵坐标加15，横坐标不变，以此坐标设置弹出div的top和left的属性，最后将新建的div通过document.body.appendChild加入到页面中，另外注意的是新弹出的div显示到前面是由于设置了其style的zIndex属性，这个很重要。用js实现在超链接中的下方弹出div层
复制链接

扫一扫

专栏目录