JQuery 弹出窗口效果

// JScript 檔

function showWin(o){  
//    debugger;
    /*找到div节点并返回*/ 
   var meaning="";
   if(o.value=="A+")
   {
       meaning="已經完全可以達到正式主管的要求";
   }
   else if (o.value=="A")
   {
       meaning="基本可以達到正式主管的要求";
   }
   else if (o.value=="B")
   {
        meaning=" 但仍需進一步訓練與觀察";
   }
   else if (o.value=="C")
   {
        meaning="仍有待加強";
   }
   else if(o.value=="D")
   {
        meaning="工作上不適任";
   }
   $("body").append("<div id='win'><div id='title'>考核等第意義<span id='close' οnclick='hide()'>X</span></div><div id='content'><div></div>");
  
   $("#content").empty();
   if(o.value!="")
   {
       $("#content").append(meaning);
      $("#win")
       .css({
        "top": (event.clientY + document.documentElement.scrollTop-30)+"px" ,
        "right": 5  + "px"
       }).show("slow");
 } 
    //n秒后自动关闭(提示框)  
    setTimeout("hide()",4000);  
       //实现鼠标拖动对话框  
//    oMove = function(obj) {  
//        var otop,oleft;  
//        otop = event.y - obj.offsetTop;  
//        oleft = event.x - obj.offsetLeft;  
//        obj.setCapture();  
// 
//        obj.onmousemove  = function()  
//        {  
//            obj.style.left = event.x - oleft;  
//            obj.style.top = event.y - otop;  
//        }  
//        obj.onmouseup  = function()  
//        {  
//            obj.onmousemove = null;  
//            obj.style.filter = null;  
//            obj.releaseCapture();  
//        }  
//    }
    $("#win").mousedown(function(event){  
            var offset=$("#win").offset();  
            x1=event.clientX-offset.left;  
            y1=event.clientY-offset.top;  
            $("#win").mousemove(function(event){  
                $("#win").css("left",(event.clientX-x1)+"px");  
                $("#win").css("top",(event.clientY-y1)+"px");  
            });  
            $("#win").mouseup(function(event){  
                $("#win").unbind("mousemove");  
            });
     });  

    
//$(function(){
//    var x = 10; 
// var y = 20;
// $("a.tooltip").mouseover(function(e){
//        this.myTitle = this.title;
//  this.title = ""; 
//     var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>"; //创建 div 元素
//  $("body").append(tooltip); //把它追加到文档中
//  $("#tooltip")
//   .css({
//    "top": (e.pageY+y) + "px",
//    "left": (e.pageX+x)  + "px"
//   }).show("fast");   //设置x坐标和y坐标，并且显示
//    }).mouseout(function(){  
//  this.title = this.myTitle;
//  $("#tooltip").remove();   //移除
//    }).mousemove(function(e){
//  $("#tooltip")
//   .css({
//    "top": (e.pageY+y) + "px",
//    "left": (e.pageX+x)  + "px"
//   });
// });
//})
 
//    var winNode = $("#win");  
//   //方法一：利用js修改css的值，实现显示效果  
//   // winNode.css("display", "block");  
//   //方法二：利用jquery的show方法，实现显示效果  
//   // winNode.show("slow");  
//    //方法三：利用jquery的fadeIn方法实现淡入  
//    winNode.fadeIn("slow");  
}  
function hide(){  
    var winNode = $("#win");  
    //方法一：修改css的值  
    //winNode.css("display", "none");  
    //方法二：jquery的fadeOut方式  
    winNode.fadeOut("slow");  
    //方法三：jquery的hide方法  
    winNode.hide("slow");  
} 

CSS文件

#win{  
    /*边框*/ 
    border:1px red solid;  
    /*窗口的高度和宽度*/ 
    width : 220px;  
    height: 120px;  
    /*窗口的位置*/ 
    position : absolute;
    /*开始时窗口不可见*/ 
    display : none;  
}  
/*控制背景色的样式*/ 
#title{  
    background-color : blue;  
    color : red;  
    /*控制标题栏的左内边距*/ 
    padding-left: 3px;  
}  
#cotent{  
    padding-left : 5px;  
    padding-top : 8px;  
}  
/*控制关闭按钮的位置*/ 
#close{  
    margin-left: 76px;  
    /*当鼠标移动到X上时，出现小手的效果*/ 
    cursor: pointer;  
}