HTML
<a href="#" οnclick="showwin()">显示窗口</a>
<div id="win">
<div id="title">标题栏<span id="close" οnclick="hide()"></span></div>
我是个窗口</div>
JS
function showwin(){
//找到div节点
var winNode = ${"#win"}
//方法1 修改CSS的display属性
winNode.css("display","block");
//方法2.jquery的show的方法
winNode.show("slow");
//方法3.jquery的fadeIn的方法
winNode.fadeIn("slow");
}
function hide(){
var winNode =${"#win"}
winNode.css("display","none");
winNode.hide("slow");
winNode.fadeOut("slow");
}
CSS
#win{
/*边框*/
border:1px red solid;
width:300px;
height:200px;
/*位置*/
position:absolute;
top:100px;
left:350px;
/*显示*/
display:none;
}
#title{
background-color:blue;
color:yellow;
padding-left:3px;
}
#content{
padding-left:3px;
padding-top:5px;
}
#close{
margin-left:158px;
/*出现手状鼠标*/
cursor:pointer;
}