基于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 相关文章推荐
JavaScript学习笔记(二) js对象
Oct 25 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JS的数组迭代方法
Feb 05 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python 的内置字符串方法小结
2016/03/15 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
建议书的格式
2014/05/12 职场文书
2014年党建工作总结
2014/11/11 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers