// 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;
}