js通过在浏览器上画出一个方形区域，并在开始时将其隐藏，然后借助JavaScript事件修改css的属性值显示该区域。

以下是具体的步骤及代码。

1，创建一个装载弹出窗口的div

  
    
    jQuery浮动窗口_www.  
      
      
      
      
    
    
    
    弹出窗口  
    
  
        
我是标题栏！X
  
        
我是一个窗口！
  
    
  
 

2，创建css文件将其显示为一个弹出窗口

#win{  
    /*边框*/  
    border:1px red solid;  
    /*窗口的高度和宽度*/  
    width : 300px;  
    height: 200px;  
    /*窗口的位置*/  
    position : absolute;  
    top : 100px;  
    left: 350px;  
    /*开始时窗口不可见*/  
    display : none;  
}  
/*控制背景色的样式*/  
#title{  
    background-color : blue;  
    color : red;  
    /*控制标题栏的左内边距*/  
    padding-left: 3px;  
}  
#cotent{  
    padding-left : 3px;  
    padding-top :  5px;  
}  
/*控制关闭按钮的位置*/  
#close{  
    margin-left: 188px;  
    /*当鼠标移动到X上时，出现小手的效果*/  
    cursor: pointer;  
}

3，创建js文件操作窗口的显示

/**
* 控制菜单显示
* by www.
*/
function showWin(){  
    /*找到div节点并返回*/  
    var winNode = $("#win");  
   //方法一：利用js修改css的值，实现显示效果  
   // winNode.css("display", "block");  
   //方法二：利用jquery的show方法，实现显示效果  
   // winNode.show("slow");  
    //方法三：利用jquery的fadeIn方法实现淡入  
    winNode.fadeIn("slow");  
}  
function hide(){  
    var winNode = $("#win");  
    //方法一：修改css的值  
    //winNode.css("display", "none");  
    //方法二：jquery的fadeOut方式  
    winNode.fadeOut("slow");  
    //方法三：jquery的hide方法  
    winNode.hide("slow");  
}

您可能感兴趣的文章: