1、jqueryWindow.js文件
复制代码 代码示例:
//显示浮动窗口
function showWindow(){
//$("#win").css("display","block");
//$("#win").show("slow");
$("#win").fadeTo("slow",0.66);
$("#win").fadeTo("slow",0.66);
}
//隐藏显示出来的层
function hideWin(){
//$("#win").css("display","none");
//淡出关闭
弹出窗口
$("#win").hide("slow");
}
2、showWindow.css文件:
复制代码 代码示例:
#win{
width:300px;
height:150px;
border:1px red solid;
position:absolute; /*把div绝对定位*/
top:30%; /*调整div与上面的距离*/
left:40%; /*调整div与左面的距离*/
display:none;
}
#menutitle{
background-color:blue;
color:green;
padding-left:3px;
}
#menucontent{
padding-left:5px;
padding-top:3px;
}
#hidewin{
margin-left:180px;
cursor:pointer;
}
3、jqueryWindow.html页面
复制代码 代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>弹出一个浮动窗口 - www.jb200.com</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/
javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jqueryWindow.js"></script>
<link rel="stylesheet" type="text/css" href="css/showWindow.css">
</head>
<body>
<a href="#" onclick="showWindow()">显示浮动窗口</a>
<div id="win">
<div id="menutitle">显示一个标题<span id="hidewin" onclick="hideWin()">X</span></div>
<div id="menucontent">标题内容</div>
</div><br />
</body>
</html>
