最近做社区的功能,pop-up的弹出模式总是窗口居中,想做一个sina 微博上的效果(如图1,取消关注),pop-up在某个元素上边冒泡出来:
一直没在网上找到现成好用的,就自己做一个,Test一下:
我的思路是这样的:
(1) 鼠标点击按钮的时候,创建一个div,其中的内容就是要pop-up出来的东西;他的坐标left,right和点击的按钮一致;
(2)pop-up 的div初始高度为0,通过jquery的animate方法,恢复原装,OK,很简单的思路。
页面的HTML代码:
<style> /** Pop-up的样式**/ .W_layer { clear: both; overflow: hidden; position: absolute; width: 100px; top: 300px; top: 10000px; } .bg { padding: 3px; border-radius: 4px; } </style> <div style="margin-top: 100px;"> <a id="aclick">click me</a> </div>
然后是JS代码:
$().ready(function () { $("#aclick").bind("click", function () { var myH = $(this).height();//按钮的高度 var pos = $("#aclick").position();//按钮的位置 var b = $('<div class="W_layer" id="popdiv">\ <div class="bg">\ <div style="background:white;border:1px solid #ccc" ><p>第一行</p>\ <p>第2行</p>\ <p>第3行</p>\ </div>\ </div>\ </div>');//生成pop-up $('body').append(b);//将pop-up加载到页面里 var posH = $("#popdiv").height();//pop-up 内容的高度 $("#popdiv").css({ left: pos.left, top: pos.top + myH, height: 0 }) .animate({ height: posH, 'top': '-=' + (posH + myH) }, 200); }); });
最终效果似乎满足了要求,但是当我狂点按钮的时候,那个pop-up竟然直接向上飘走了!!
我想看看新浪微博的效果,也狂点取消关注的按钮,发现他的pop-up缩进去了。
到底为何会这样呢?持续研究中。。。。不过基本功能满足了,还好!