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


Posted in Javascript onApril 14, 2011

blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息;或者用来显示一个登陆窗口,也可用来显示图片等。

blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等。blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay。

message:主要用来设置要显示的内容,可以直接设置为一段文字,html代码或者使用jquery获取页面上隐藏的div。

css:主要用来设置弹出层的样式,包括弹出层的位置,大小,边框等。

overlayCSS:主要用来设置遮罩层的样式,包括背景色,透明度等。

showOverlay:主要用来设置是否显示遮罩层,如果要隐藏遮罩层可以设置为false。

下面通过一些例子来看看具体的用法,在页面导入jquery.min.js和jquery.blockui.js文件,具体实现代码如下:

$("#btnSubmit").click(function () { 
$.blockUI({ 
message: $("#loginForm"), 
css: { 
width: '300px', 
height: '300px', 
left: ($(window).width() - 300) / 2 + 'px', 
top: ($(window).height() - 300) / 2 + 'px', 
border: 'none' 
} 
}); 
}); 
$("#btnLogin").click(function () { 
$.blockUI({ 
message: "<h2>正在登录,请稍候……</h2>", 
css: { 
border: '1px solid black' 
} 
}); 
setTimeout(function () { $.unblockUI() }, 1000); 
}); 
$("#btnCancel").click(function () { 
$.unblockUI(); 
});

对应的html代码为:
<div id="loginForm" style="display:none"> 
<table> 
<tr> 
<td>用户名:</td> 
<td><input id="txtUserName" type="text" /></td> 
</tr> 
<tr> 
<td>密 码:</td> 
<td><input id="txtPwd" type="text" /></td> 
</tr> 
<tr> 
<td><input id="btnLogin" type="button" value="登录" /></td> 
<td><input id="btnCancel" type="button" value="取消" /></td> 
</tr> 
</table> 
</div>
Javascript 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 #Javascript
让textarea自动调整大小的js代码
Apr 12 #Javascript
javascript算法学习(直接插入排序)
Apr 12 #Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 #Javascript
jquery监控数据是否变化(修正版)
Apr 12 #Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 #Javascript
javascript 学习笔记(八)javascript对象
Apr 12 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
在pycharm中显示python画的图方法
2019/08/31 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
2014年度党员自我评议
2014/09/13 职场文书
2014年绿化工作总结
2014/12/09 职场文书
党员个人总结范文
2015/02/14 职场文书
继续教育个人总结
2015/03/03 职场文书
导游词之镜泊湖
2019/12/09 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python