基于jquery的blockui插件显示弹出层
更新时间：2011年04月14日 19:27:43 作者：
在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。
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>
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>
您可能感兴趣的文章:
- jQuery弹出层插件popShow用法示例
- jQuery Dialog 弹出层对话框插件
- JQUERY THICKBOX弹出层插件
- jQuery弹出层插件简化版代码下载
- Jquery 弹出层插件实现代码
- jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件
- jQuery插件zoom实现图片全屏放大弹出层特效
- 一个jquery的弹出层的插件
- jQuery boxy弹出层插件中文演示及使用讲解
- js弹出层(jQuery插件形式附带reLoad功能)
- Jquery实现弹出层分享微博插件具备动画效果
- jQuery弹出层插件Lightbox_me使用指南
- Jquery弹出层插件ThickBox的使用方法
- jQuery弹出层插件popShow(改进版)用法示例
相关文章
这篇文章主要介绍了jquery默认校验规则有哪些,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了Jquery如何在指定DIV加载HTML,需要的朋友可以参考下2014-02-02
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D帕累托图效果,结合实例形式分析了jQuery使用FusionCharts插件载入xml数据及绘制2D帕累托图的具体实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery短信验证倒计时功能实现方法,实例分析了jQuery前台倒计时功能及ajax交互的相关技巧,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery+PHP打造滑动开关效果,实现类似360安全卫士防火墙开启关闭的开关,非常的实用，这里推荐给大家2014-12-12
浏览网页时不小心会碰到这样的一个网站有幻灯片而且每个数字上面都带有进度条闲的无聊,自己用jquery实现了一个,因为有一个进度条的播放过程暂不支持ie6，热爱特效的你可不要错过了哈2013-02-02
本文给大家介绍的是一款移动端下的jQuery插件Hammer.js，他是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件支持各种手机事件，比如缩放，qq左滑动删除，放大，旋转等2015-07-07
jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一些后台管理系统来管理大量数据的场合2015-12-12
下面小编就为大家带来一篇JQuery之proxy实现绑定代理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件HighCharts实现气泡图效果,结合完整实例形式分析了jQuery插件HighCharts绘制气泡图的实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
最新评论