基于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 相关文章推荐
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
javascript中this用法实例详解
Apr 06 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
强大的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 文件缓存的性能测试
2010/04/25 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
详解vue v-model
2020/08/31 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python的argparse库使用详解
2018/10/09 Python
Python OpenCV实现视频分帧
2019/06/01 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python如何使用腾讯云发送短信
2020/09/17 Python
如何开发一个JQuery插件
2016/07/28 面试题
经理职责范文
2013/11/08 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
工作作风承诺书
2014/08/30 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
PHP实现两种排课方式
2021/06/26 PHP