一个pop-up的思考

    最近做社区的功能，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缩进去了。

到底为何会这样呢？持续研究中。。。。不过基本功能满足了，还好！