Jquery的blockUI使用 js弹出层

Jquery的blockUI使用
1.首先要准备好关于jquery的js文件
  包括jquery-1.2.3.js和jquery.blockUI.js
2.在前台JSP页面中调用Jquery
Java代码 
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
2. <% 
3. String path = request.getContextPath(); 
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
5. %> 
6.  
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
8. <html> 
9.   <head> 
10.     <base href="<%=basePath%>"> 
11.      
12.     <title>My JSP 'JqueryShowBlock.jsp' starting page</title> 
13.      
14.     <meta http-equiv="pragma" content="no-cache"> 
15.     <meta http-equiv="cache-control" content="no-cache"> 
16.     <meta http-equiv="expires" content="0">     
17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
18.     <meta http-equiv="description" content="This is my page"> 
19.     <!-- 
20.     <link rel="stylesheet" type="text/css" href="styles.css"> 
21.     --> 
22.     <script language="JavaScript" type="text/javascript" 
23.                 src="<%=path %>/jquery/jquery-1.2.3.js"></script> 
24.     <script type="text/javascript" src="<%=path %>/jquery/jquery.blockUI.js"></script> 
25.     <script language="JavaScript"> 
26.              function showBlock(){ 
27.                     jQuery.blockUI({ message: "处理中,请稍候...", css: {color:'#fff',border:'3px solid #aaa',backgroundColor:'#CC3300'},overlayCSS: { opacity:'0.0' }}); 
28.                     setTimeout('hideBlock()',2000);//2000毫秒后调用hideBlock() 
29.              } 
30.              function hideBlock(){ 
31.                jQuery.unblockUI(); 
32.             } 
33.     </script> 
34.  
35.   </head> 
36.    
37.   <body> 
38.     This is my JSP page. <br> 
39.     ShowJqueryBlock Start:<input type="button" id="showBlock" value="ShowBlock" onclick="showBlock()"/><br/> 
40.   </body> 
41. </html> 
3.页面执行结果如下:


当点击"ShowBlock"按钮时会调用jquery的jQuery.blockUI方法,"处理中,请稍后..."的jquery的block信息会显示,并且将页面锁定;过2000毫秒后调用jQuery.unblockUI()将jquery的block信息取消。

你可能感兴趣的:(js div 层)