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

zxingchao2005

浏览: 80418 次
性别:
来自: 北京

最近访客更多访客>>

linchers

xuewei97

xinger666

kanpiaoxue

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (83)

社区版块

存档分类

实现思想主要是通过函数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>

效果图: