Web前端设计模式－－制作漂亮的弹出层

#tips         {            background-color: white;             border-left: 1px solid #a6c9e2;            border-right: 1px solid #a6c9e2;            border-top:5px solid #a6c9e2;            border-bottom:5px solid #a6c9e2;            width:268px; height:60px;             z-index:9;            position:absolute;                -moz-border-radius: 5px; -webkit-border-radius: 5px;            padding:8px 18px;         }                  /* 弹出层的指向图标，left：-10 使它出现在整个Div的左侧 */         #tips #tipsArrow { position:absolute; top:26px; left: -10px }                  #tips #light         {            width:36px;            height:36px;            margin:6px 16px 16px 16px;            float:left;         }                  #tips span         {           margin-top:18px;             }                  #tips #close         {           width:20px;           height:16px;           border:none;           z-index:1;           left:280px;           top:6px;           position:absolute;           cursor:pointer;         }

$(document).ready(function(){    //时间鼠标经过    $("ul li span").mouseover(function(){        $("#tips").remove();        var elem= $(this).parent();        var mTop=elem.offset().top;//获取该元素的top坐标        var mLeft=elem.offset().left;//获取该元素的left坐标        var addLeft=elem.width();//获取该元素的宽度                 var finalTop=mTop-30;//获取最终元素出现的Top位置，此时-30个元素是提高这个Div的高度，让箭头指向对应行        var finalleft=mLeft+addLeft+20; // 获取最终元素出现Left的，对应行的左边加上行宽加上20个空元素                var num=$("li").index(elem)+1;        popDiv1(finalTop,finalleft,"提示框提醒你，这是第"+num+"行数据!");    })     })//固定的信息框function popDiv1(tops,lefts,messages){   var str="";   str="<div id='tips'><img id='tipsArrow' src='images/arrow.png' alt=''/><img id='close' src='images/close.jpg' alt='' ).append(str);   $("#tips").css({"top":tops+"px","left":lefts+"px"});}function closeUp(){    $("#tips").remove();}