弹出窗口
<!DOCTYPE html>
<html>
<head>
<title>jQuery实例1:浮动窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../js/jquery.js"></script>
</head>
<style>
#win{
border:1px red solid;
width : 300px;
height: 200px;
position : absolute;
top : 100px;
left: 350px;
display : none;
}
#title{
background-color : blue;
color : red;
padding-left: 3px;
}
#cotent{
padding-left : 3px;
padding-top : 5px;
}
#close{
margin-left: 188px;
cursor: pointer;
}
</style>
<body>
<a onclick="showWin()" href="#" >弹出窗口</a>
<div id="win">
<div id="title">我是标题栏!<span id="close" onclick="hide()">X</span></div>
<div id="content">我是一个窗口!</div>
</div>
</body>
</html>
<script>
function showWin(){
var winNode = $("#win");
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
winNode.fadeOut("slow");
winNode.hide("slow");
}
</script>