A:编写页面:jqueryWIn.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/win.css">
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript" src="js/jqueryWin.js"></script>
</head>
<body>
<a href="#" οnclick="showWin()">显示浮动框口</a>
<div id="win">
<div id="title">标题<span id="close" οnclick="hideWin()">X</span></div>
<div id="content">这是一个弹出窗口</div>
</div>
</body>
</html>
B:创建css文件:win.css
/*margin边界 border边框 padding 填充 content内容*/
#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;
}
/*对主窗口设置样式*/
#content{
padding-left:10px;
padding-top:20px;
}
/*控制关闭按钮的位置*/
#close{
margin-left: 250px;
/*鼠标进入时,显示小手状,告知用户可以点击操作*/
cursor:pointer;
}
C:编写js:jqueryWin.js
function showWin()
{
//找到该div节点对象
var winNode=$("#win");
//该div所对应的窗口显示出来
//方法1:修改css:display=block
//winNode.css("display","block");
//方法2:show()
// winNode.show("slow");
//方法3:淡入效果.fadeIn()
winNode.fadeIn(2500);
}
function hideWin()
{
//找到该div节点对象
var winNode=$("#win");
//该div所对应的窗口显示出来
//方法1:修改css:display=none
//winNode.css("display","none");
//方法2:hide()方法
winNode.hide("slow");
//方法3:淡出效果 fadeOut()
//winNode.fadeOut(2000);
}