如何实现简单带有指向点击处箭头的说明窗口

效果类似于iPhone中的PopView：考虑用弹出浮动div的方法，但是不知道有没有什么正统方案？谢谢

解决方案 »

  1.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    body{ font:12px "宋体";}
    #aa{cursor:pointer;}
    #bb{display:none;color:#000;border:1px solid #000;background-color:#ccc;width:100px;height:100px;}
    #bb span{width:30px;height:30px;line-height:30px;text-align:center;background-color:#fff;display:block;float:left;margin:0 10px;cursor:pointer;}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#aa").click(function(){
    $("#bb").css("display","block");
    });
    $("#ok").click(function(){
    $("#aa").fadeOut(500);
    $("#bb").fadeOut(500);
    });
    $("#no").click(function(){
    $("#bb").fadeOut(500);
    });
    });
    </script>
    </head>
    <body>
    <div id="aa">请点击我</div>
    <div id="bb"><span id="ok">确定</span><span id="no">取消</span></div>
    </body>
    </html>
      

  2.   

    点击事件时判断鼠标点击的位置，然后将DIV框位置和鼠标位置设置相同，通常用event.clientX和event.clientY获取鼠标坐标，当然这个是屏幕位置，如果有滚动条且滚动需要加上相对位移，这个你可以网上搜索下相关文章解决。