1. JqueryWin.jsp <link rel="stylesheet" type="text/css" href="css/win.css">
<script type="text/javascript" src="jslib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jslib/jqueryWin.js"></script>
--------------------------------------
<a onclick="showWin()" href="#">显示弹出窗口</a>
<div id="win" >
<div id="title">标题栏<span id="close" onclick="hide()">X</span></div>
<div id="content">内容</div>
</div> 2. JqueryWin.js function showWin(){
var winNode = $("#win");
//winNode.css("display","block");
//winNode.show("slow");
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
//winNod.css("display","none");
//winNode.hide("slow");
winNode.fadeOut("slow");
} 3. Win.css #win{
border: 1px blue solid;
width: 300px;
height: 200px;
display: none;
position: absolute;
top: 100px;
left: 350px;
}
#title{
background-color: blue;
color: red;
padding-left: 3px;
}
#content{
padding-left: 3px;
padding-top: 5px;
}
#close{
padding-left: 235px;
cursor:pointer;
} 感谢sean先生供稿!
共同学习,写下你的评论
评论加载中...
作者其他优质文章