1、首先是JSP文件 index.jsp
点击(此处)折叠或打开
- <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <link href="global.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="jquery-1.4.2.js"></script>
- </head>
-
- <script type="text/javascript">
- //显示加载效果
- function showPopDiv(){
- $("#loading").css("display","block");
- $("#popDiv").css("display","block");
- }
- //取消加载效果
- function hiddenPopDiv(){
- $("#loading").css("display","none");
- $("#popDiv").css("display","none");
- }
- </script>
- <body>
- <input type="button" value="显示加载" onclick="showPopDiv();"/>
- <div id="popDiv"></div>
- <div id="loading"></div>
- <input type="button" value="取消加载" onclick="hiddenPopDiv();"/>
- </body>
- </html>
2、css文件 global.css
点击(此处)折叠或打开
- #loading{
- position:fixed;_position:absolute;
- display: none;
- top:50%;left:50%;
- width:124px;height:124px;
- overflow:hidden;
- background:url(loaderc.gif) no-repeat;z-index:7;
- margin:-62px 0 0 -62px;
- }
-
- #popDiv{
- margin-top:50px;
- display: none;
- position: absolute;
- top: 0%;
- left: 0%;
- width: 100%; height: 100%;
- background-color: black;
- z-index:2; -moz-opacity: 0.7;
- opacity:.70;
- filter: alpha(opacity=5);
- }
4、在index.jsp中引入 jquery-1.4.2.js