[转载]Web前端设计模式--制作漂亮的弹出层

  .TipDiv
        {
            width:500px;
            height:120px;
            padding:8px;
            border-top:solid 5px #a6c9e2;
            border-bottom:solid 5px #a6c9e2;
            border-left:solid 1px #a6c9e2;
            border-right:solid 1px #a6c9e2;
            background:#ffffff;
            z-index:10;/*z-index很重要，它决定了Div框在页面上的叠加顺序*/
            position:absolute;/*绝对定位，它决定了该元素可以根据top 和 left 叠在其他元素上*/
        }
        
        .TipDiv img
        {
           width:110px;
           height:110px;
           margin-right:36px;
           margin-left:10px;
           float:left;
        } 
        
        .TipDiv span
        {
            /*×*/
          width:340px;
          height:110px;
          float:left;
          word-break:break-all;
          border-top:dashed 1px #3a7ac8;
          margin-top:8px;
        }

$(document).ready(function(){
     //标题鼠标经过
     $("ul li a").mousemove(function(e){
            $(".TipDiv").remove();//若页面上有该元素，则移除该元素...0
            var x=e.clientX + 10;//获取鼠标的x轴坐标            
            var y=e.clientY + 10;//获取鼠标的y轴坐标
            var num=$(this).attr("id");
            var imgs;
            var word;
            var name;           
            
            switch(num)
            {            
               case "1":{ imgs="images/mimi.bmp"; name="秘密 朗达·拜恩 (Rhonda Byrne)..." ; word="这是一个神圣的秘密花园，住着爱丽丝..." ; break; }
               case "2":{ imgs="images/mama.bmp"; name="一位母亲的记忆 爱心团..." ; word="这是一个关于母亲的故事，感染了每个中国人，她是一位暴走族母亲，也是一位为儿子捐献肝的母亲，她更是一位伟大的，典型的中国母亲..." ; break; }
               case "3":{ imgs="images/nikesong.bmp"; name="尼克爷爷讲故事 （巴特沃斯, 漪然）..." ; word="★当今世界最出色的儿童绘本作家、插画家！<br>★获得1992年度英国图书奖(British Book Awards)<br>★全球每15分钟就有一本由他创作的绘本被买走<br>★他的绘本让阅读变得赏心悦目！" ; break; }
               case "4":{ imgs="images/lqz.bmp"; name="李清照:人生不过一场绚烂花(蔚起)..." ; word="《李清照：人生不过一场绚烂花事》精选易安词作50首，从《武陵春（风住尘香花已尽）》始，至《好事近（风定落花深）》结束。通篇以闲话家常、婉约诚挚的笔法评析、阐释，娓娓道来，不生涩，没有说教。" ; break; }
            }
            
          popDiv(imgs,name,word,x,y); 
                 
    })
    
    
    
    //标题鼠标离开
    $("ul li a").mouseout(function(){
        $(".TipDiv").remove();
    })   

})


//随鼠标移动的信息框
function popDiv(face,name,info,xx,yy)
{
       var str="";
       str+="<div class='TipDiv'>";
       str+="<img alt='face' src='"+face+"'/>";
       str+="<strong><em>"+name+"</em></strong><br />";
       str+="<span>"+info+"</span>";
       str+="<div>";
       $('body').append(str);//在页面上追加该元素，样式如上已经写好
       $(".TipDiv").css({"top":yy+"px","left":xx+"px"});//设置该元素出现的位置（这里是出现在鼠标的右边和下边的偏离10px位置）
}

$(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='' onclick='closeUp()'/><img src='images/light.gif' alt='' id='light'/><p>"+messages+"</p></div>";
   $('body').append(str);
   $("#tips").css({"top":tops+"px","left":lefts+"px"});
}

function closeUp()
{
    $("#tips").remove();
}