`
taody
  • 浏览: 100124 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery的blockUI使用 js弹出层

    博客分类:
  • 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信息取消。
分享到:
评论

相关推荐

    JQuery.BlockUI 弹出层

    使用jQuery.BlockUI非常简单,只需引入jQuery库和BlockUI插件的脚本文件,然后通过调用$.blockUI方法来启动弹出层。例如,可以这样创建一个简单的消息提示: ```javascript $.blockUI({ message: '请稍候...&lt;/h1&gt;...

    blockUI弹出层

    BlockUI 是一个 JavaScript 插件,它主要用于网页中的页面元素阻塞或锁定,通常用于创建弹出层或者浮动层效果。这个插件可以帮助开发者轻松地实现页面部分区域的加载动画,提示用户页面正在处理数据,避免用户在数据...

    基于jquery的blockui插件显示弹出层

    jQuery BlockUI 是一款非常实用的JavaScript插件,它允许开发者在网页中快速创建弹出层,通常用于在AJAX操作期间阻止用户与页面交互或显示重要通知。在使用BlockUI时,你可以设置自定义的内容、样式和行为,使得弹出...

    基于jquery的BlockUI做的遮罩层

    在网页开发中,有时我们需要创建一个遮罩层或者弹出框来提示用户或者阻止用户与页面其他部分的交互,这就是“基于jQuery的BlockUI”插件所做的事情。BlockUI是一款非常实用的jQuery插件,它能够方便地实现页面区域的...

    jQuery BlockUI 插件(遮罩层)

    jQuery BlockUI 是一个非常实用的JavaScript插件,它允许开发者轻松地在网页上实现遮罩层效果,也就是我们常说的“加载中”或“禁用界面”功能。这个插件可以将任何HTML元素或者整个页面进行锁定,创建一个半透明的...

    jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    本文主要介绍了如何使用jQuery来实现一个带有遮罩层效果的blockUI弹出层。这种弹出层通常用于需要在用户进行某些操作时,暂停页面的其他交互,并且提示用户正在执行某项操作。通过在本文中提供的示例代码和demo源码...

    jquery.blockui遮罩插件

    通过自定义`message`参数,你可以使用Bootstrap的弹出框或者进度条来显示加载状态。 **总结** jQuery BlockUI 是一个强大的前端开发工具,它为开发者提供了便捷的页面锁定和解锁功能,确保在执行关键操作时用户...

    jquery.blockUI完整事例

    在上面的例子中,当用户点击ID为`myButton`的按钮时,会弹出一个显示“请稍后”的遮罩层,阻止用户对页面的其他操作。 三、高级配置 jQuery.blockUI提供了丰富的配置选项,允许开发者自定义遮罩层的样式、动画效果...

    Jquery 等待弹出框插件jquery.blockUI(遮罩蒙板)

    jQuery BlockUI 插件就是这样一个工具,它能轻松实现页面的“锁定”效果,创建出类似于弹出框的遮罩层,为用户提供直观的反馈。 **一、BlockUI 插件安装与引入** 首先,你需要在项目中引入 jQuery 和 BlockUI 插件...

    jquery blockui

    在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息;或者用来显示一个登陆...

    blickui-弹出层插件

    在实际应用中,"blickui-弹出层插件"的使用方法可能包括以下步骤:引入jQuery和插件的JavaScript及CSS文件,通过jQuery选择器找到要添加弹出层的元素,然后调用插件提供的方法来设置和控制弹出层的显示、隐藏、动画...

    jquery.blockUI.js

    很好用的js库,用来做半透明的弹出层效果很好。

    11个jquery弹出层插件总会有你喜欢的和适合你的

    在标题和描述中提到的“11个jQuery弹出层插件”,我们将探讨这些插件的特点、应用场景以及如何使用它们。 1. **jQuery UI Dialog** jQuery UI 提供了一个高度可定制的Dialog组件,可以用来创建模态或非模态对话框...

    jquery插件弹出div

    总结起来,"jquery插件弹出div"是一个利用jQuery库实现的交互功能,它通过"blockUI"这样的插件提供了弹出式对话框或者模态框,增强了用户的交互体验。理解并掌握这类插件的使用,对于提升网页应用的用户体验和开发...

    jquery遮罩

    除了BlockUI,还有其他jQuery遮罩插件可供选择,如`jQuery Masked Input Plugin`,主要用于输入框的格式化,不适用于全局遮罩,或者`jQuery UI Dialog`,可以创建弹出对话框并带有遮罩效果。 ### 七、总结 jQuery...

    弹出层之1:JQuery.Boxy (一) 使用介绍

    下载完成后,解压文件将得到一个javascript文件jquery.boxy.js和一个css文件boxy.css,以及用于构成弹出层圆角的四个图片文件。在将这些文件引入到项目中后,需要修改boxy.css文件中图片路径的设置,确保路径正确...

    Block.UI示例

    首先,你需要在页面中引入 jQuery 和 BlockUI 的 JavaScript 文件。这可以通过下载并本地引用,或者使用 CDN 进行远程加载。例如: ```html &lt;script src="https://code.jquery.com/jquery-3.x.y.min.js"&gt;&lt;/script&gt; ...

    Web开发经常使用的几个插件

    - **jQuery BlockUI**: 这个插件可以轻松地阻止用户对页面的交互,通常在页面加载或执行长时间操作时使用,显示一个遮罩层。 - **NProgress**: NProgress是一个轻量级的加载条插件,可以为页面加载过程添加视觉...

Global site tag (gtag.js) - Google Analytics