基于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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
js实现二级导航功能
Mar 03 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
JavaScript修改注册表实例代码
Jan 05 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
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
Javascript注入技巧
2007/06/22 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
详解javascript遍历方式
2015/11/11 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python如何制作缩略图
2019/04/30 Python
python for和else语句趣谈
2019/07/02 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
公司规章制度范本
2015/08/03 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript