您的位置：首页 > Web前端 > JQuery

jquery 弹出一个淡出窗口示例代码

2011-07-10 12:12 791 查看
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");
}

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

jqueryWindow.html页面代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>弹出一个浮动窗口</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航