1. <%@ page language="java" contentType="text/html; charset=utf-8" 
    2.  
         
  2.     pageEncoding="utf-8"%> 
    3.  
         
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    4.  
         
  4. <html> 
    5.  
         
  5. <head> 
    6.  
         
  6. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
    7.  
         
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    8.  
         
  8. <title>Insert title here</title> 
    9.  
         
  9. <script type="text/javascript"> 
    10.  
         
  10.     function showwin(){ 
    11.  
         
  11.         //alert('测试'); 
    12.  
         
  12.         //1.找到窗口对应的div节点 
    13.  
         
  13.         var winNode = $("#win"); 
    14.  
         
  14.         //2.让div对应的窗口显示出来 
    15.  
         
  15.         //方法1,修改节点的css值，让窗口显示出来 
    16.  
         
  16.         //winNode.css("display","block"); 
    17.  
         
  17.         //方法2,利用Jquery的show的方法 
    18.  
         
  18.         winNode.css("display","none"); 
    19.  
         
  19.         winNode.show("slow"); 
    20.  
         
  20.     } 
    21.  
         
  21.      
    22.  
         
  22.     function hide(){ 
    23.  
         
  23.     //alert(''); 
    24.  
         
  24.         var winNode = $("#win"); 
    25.  
         
  25.         //方法1，修改css 
    26.  
         
  26.         //winNode.css("display","none"); 
    27.  
         
  27.         //方法2，利用hide方法 
    28.  
         
  28.         //winNode.hide("slow"); 
    29.  
         
  29.         //方法3，利用fadeOut方法 
    30.  
         
  30.         winNode.fadeOut("slow"); 
    31.  
         
  31.     } 
    32.  
         
  32. </script> 
    33.  
         
  33. <style type="text/css"> 
    34.  
         
  34. /*id选择器*/ 
    35.  
         
  35. #win{ 
    36.  
         
  36.     /*希望窗口有边框*/ 
    37.  
         
  37.     border: 1px red solid; 
    38.  
         
  38.     width: 300px; 
    39.  
         
  39.     height: 150px;  
    40.  
         
  40.     /*希望控制窗口的位置*/ 
    41.  
         
  41.     position:absolute;/*绝对定位*/ 
    42.  
         
  42.     top:100px; 
    43.  
         
  43.     left:100px; 
    44.  
         
  44.     display: none; 
    45.  
         
  45. } 
    46.  
         
  46.  
    47.  
         
  47. #title{ 
    48.  
         
  48.     /*控制标题栏的背景色*/ 
    49.  
         
  49.     background-color: fuchsia; 
    50.  
         
  50.     /*控制标题栏中文字的颜色*/ 
    51.  
         
  51.     color: yellow; 
    52.  
         
  52.     /*控制标题栏的内边距*/ 
    53.  
         
  53.     padding-left: 3px; 
    54.  
         
  54.      
    55.  
         
  55. } 
    56.  
         
  56.  
    57.  
         
  57.  
    58.  
         
  58. #content{ 
    59.  
         
  59.     padding-left: 3px; 
    60.  
         
  60.     padding-top: 5px; 
    61.  
         
  61. } 
    62.  
         
  62.  
    63.  
         
  63. #close{ 
    64.  
         
  64.     /*是按钮向右*/ 
    65.  
         
  65.     margin-left: 220px; 
    66.  
         
  66.     /*使鼠标移动上去后显示一个小手*/ 
    67.  
         
  67.     cursor: pointer; 
    68.  
         
  68. } 
    69.  
         
  69.  
    70.  
         
  70. </style> 
    71.  
         
  71. </head> 
    72.  
         
  72. <body> 
    73.  
         
  73.     <a onclick="showwin()" href="#">显示浮动窗口</a> 
    74.  
         
  74.     <!--如何表示页面中的一个弹出窗口 ?可以使用div来表示 --> 
    75.  
         
  75.     <div id="win"> 
    76.  
         
  76.         <div id="title">标题<span id="close" onclick="hide()">关闭</span></div> 
    77.  
         
  77.         <div id="content">我是一个窗口</div> 
    78.  
         
  78.      
    79.  
         
  79.     </div> 
    80.  
         
  80.      
    81.  
         
  81.      
    82.  
         
  82. </body> 
    83.  
         
  83. </html> 
    84.