Jquery實現彈出窗口

 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先生供稿！