• 一个popup的思考


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

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

     

       

  • 相关阅读:
    练习_Python3 爬取笔趣阁最新小说章节
    Python3 map()函数
    Java图片验证码生成
    神经网络
    leetcode
    hive开发规范
    北明数科 bug
    JAVA集合~
    令人头痛的JVM
    重定向和管道符
  • 原文地址:https://www.cnblogs.com/xinchuang/p/2801989.html
Copyright © 2020-2023  润新知