JQuery_窗口弹出效果

HTML

<a href="#" onclick="showwin()">显示窗口</a>

<div id="win">

    <div id="title">标题栏<span id="close" onclick="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;

}