<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>浮动窗口</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
<link type="text/css" rel="stylesheet" href="css/win.css"/>
</head>
<body>
<a onclick="showwin()" href="#">显示浮动窗口</a>
<!--如何显示一个弹出窗口,可以使用div表示-->
<!--需要用css来改变这个div的样子-->
<!--标题栏和内容区-->
<div id="win">
<div id="title">标题栏<span id="close" onclick="hide()">X</span></div>
<div id="content" >我是一个窗口哦!!</div>
</div>
</body>
</html>
function showwin(){
//alert("测试方法");
//1.查找窗口对应的div节点
var winNode = $("#win");
//2.让div显示出来
//方法1 修改节点css值,让其显示
//winNode.css("display","block");
//方法2 利用jquery的show方法
//winNode.show("slow");
//方法3 利用jquery的fadeIn方法
winNode.fadeIn("slow");
}
function hide(){
//1.查找窗口对应的div节点
var winNode = $("#win");
//2.让div显示出来
//方法1 修改节点css值,让其显示
//winNode.css("display","none");
//方法2 利用jquery的hide方法
//winNode.hide("slow");
//方法3 利用jquery的fadeOut方法
winNode.fadeOut("slow");
}
/*id选择器*/
#win {
/*窗口边框*/
border:1px red solid;
/*窗口宽度高度固定*/
width:300px;
height:200px;
/*窗口定位*/
position:absolute;/*绝对定位*/
top:100px;
left:300px;
/*初始话不可见*/
display:none;
}
/*标题栏样式*/
#title {
background-color:blue;
color:yellow;
/*控制标题栏的左内边距*/
padding-left:3px;
}
#content {
padding-left:3px;
padding-top:5px;
}
#close{
margin-left:158px;
/*鼠标进入显示小手状态*/
cursor:pointer;
}