使用jquery的blockui插件显示弹出层

使用jquery的blockui插件显示弹出层

Posted on 2011-04-14 16:34 孤独者 阅读(9975) 评论(0) 编辑 收藏

  在做网站的开发过程中,可能需要使用弹出层,使用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>
复制代码

转载于:https://www.cnblogs.com/wangyhua/archive/2012/12/19/4050608.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS页面跳转大全

所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转&#xff0c;如我们打开的是A页面&#xff0c;通过javsrcipt脚本就会跳转到B页面。目前很多垃圾站经常用js跳转将正常页面跳转到广告页面&#xff0c;当然也有一些网站为了追求吸引人的视觉效果&#xff0c;把一些栏…

CentOS SSH公钥登录问题

From: http://segmentfault.com/q/1010000000445726 内网&#xff0c;想做ssh root公钥登录&#xff0c;配置好之后还是提示输入密码&#xff0c;现象&#xff1a; 在服务器端使用其他端口开放sshd&#xff1a; $/usr/sbin/sshd -p 1234此时客户端可以无密码登录&#xff0c;但…

TCPDUMP/LIBPCAP 3-PCAP's MAN手册(1)

概要 #include <pcap/pcap.h> 说明 PCAP提供为抓包系统提供高级接口。网络上的所有数据包&#xff0c;即使是发往其他主机的数据包&#xff0c;都可以通过这种机制访问。它还支持将捕获的数据包保存到“savefile”&#xff0c;和从“savefile”中读取数据包。 打开捕…

提升用户体验,你不得不知道的事儿——三种提醒框的微技巧

大家都知道无论是android开发还是其他的开发&#xff0c;用户的体验都是很重要的事儿&#xff0c;下面就android开发中的三种提醒方式&#xff0c;Toast,SnackBar,Dialog做一些细节上的处理&#xff0c;或许能让你的产品更有用户亲和力。 1&#xff09;Toast Toast是一个轻量级…

分享:wkhtmltoimage开源工具的基本应用

wkhtmltoimage开源工具的基本应用 http://my.oschina.net/lidonghao/blog/90083

SVN:冲突解决 合并别人的修改

在项目中&#xff0c;基本不可避免多个人同时参与一个项目&#xff0c;因此就可能会出现多个人同时修改一个文件的情况&#xff0c;就不可避免的会出现冲突。svn已经很聪明了&#xff0c;如果你和别人对于同一个文件的修改之间不存在重叠&#xff08;比如你在文件最开始增加了一…

Error: Could not find or load main class

在 java 编程中如果遇到此错误&#xff0c;那么检查下 classpath。 必须确保把 .class 文件的路径添加到 classpath 中&#xff0c; 如果是在当前路径&#xff0c;那么就添加字符 . 到 classpath 中。注意不同系统环境下使用的路径分隔符是不同的&#xff0c;在 windows 下是分…

极客导航

评&#xff1a;集合产品技术与方案集合的方案 http://www.gogeeks.cn/job/2/Java%E5%B7%A5%E7%A8%8B%E5%B8%88转载于:https://www.cnblogs.com/jhj117/p/5779226.html

freemarker 分页逻辑

<#-- 分页组件需要传入的参数 pageUrl ,用来生成的html地址&#xff0c;在pageUrl中必须有{page}在生成html地址的时候会自动把页码给赋值上去。页码起始值为1pageNum 最大显示页 默认9beforPage 前显示页 默认3afterPage 后显示页 默认3countPage 总页数 必须传入curren…

linux上SVN解决冲突的办法

From: http://blog.csdn.net/bravezhe/article/details/7396151 工程师A修改了a.txt的第一行&#xff0c;提交了。 工程师B也修改了a.txt的第一行&#xff0c;然后执行svn up&#xff0c;这时SVN提示了&#xff1a;&#xff08;以下&#xff0c;你开始扮演工程师B的角色了&…

循环队列及C语言实现三

在之前的博客中给出了设计循环队列的思路以及源码&#xff0c;这些可都是经过我长期大数据测试的验证哦。当然&#xff0c;现在的很多开源项目和一些封装好的类或接口也都有类似的队列实现方法&#xff0c;之所以我还在使用自己写的这一套方法&#xff0c;主要是因为灵活性较大…

【转】提高PHP性能的53个技巧

PHP技巧汇总:提高PHP性能的53个技巧用单引号代替双引号来包含字符串&#xff0c;这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量&#xff0c;单引号则不会&#xff0c;注意&#xff1a;只有echo能这么做&#xff0c;它是一种可以把多个字符串当作参数的函数译注&a…

el-table列宽设置百分比无效;el-table使用min-width设置百分比;el-table百分比设置无效;

废话不多说&#xff0c;直接给每个el-table-column&#xff0c;设置 width"auto" min-width"25%"即可。 总的百分比还是要等于100%哈。 点赞收藏吧 感谢 代码可以直接复制使用&#xff1a; <template><div style"width:1300px;">&…

Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements(实现)interface(接口)?...

http://blog.csdn.net/fhm727/article/details/5220003 1、什么是匿名内部类&#xff1f; 内部类&#xff0c;存在于另一个类内部的类&#xff0c;而匿名内部类&#xff0c;顾名思义&#xff0c;就是没有名字的内部类。 2、为什么需要匿名内部类&#xff1f; 每个inner clas…

VIM使用系统剪切板

在 Linux 终端模式下使用 vim 编辑器时发现经常需要在vim打开的文本文档进行复制粘贴&#xff0c;那么下面就跟着我的思路一步步往下走吧。 一、首先确认当前 vim 配置是不是支持系统剪切板&#xff0c;可以在终端模式下输入命令&#xff1a; vim --version | grep clipboard…

AndroidManifest.xml清单文件要点

AndroidManifest.xml AndroidManifest.xml清单文件通常包括如下内容&#xff1a; 应用程序的包名&#xff0c;该包名作为该应用的唯一标识。应用包含的组件&#xff0c;如Activity,Service,Broadcastreceiver和ContentProvider.应用程序使用系统所需的权限声明。其他程序访问该…

python操作Excel读写--使用xlrd

From: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 一、安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装&#xff0c;前提是已经安装了python 环境。 也可以在命令行执行&#xff1a;easy_install xlrd (注意权限) 二、使用介绍…

el-table自动充满,且无滚动条;el-table某列的列宽自适应,其他列按比例分配。

情景一&#xff1a;例如首列按照内容自适应展开&#xff0c;其余列有各自的比例。这样设置&#xff0c;就不会出现滚动条。 注意点&#xff1a; 给需要自适应展开的列加 :width"flexColumnWidth"计算方法 就可以自适应展开需要给余下所有的列都设置 width“auto” mi…

DataGridView控件中显示图片及其注意事项 【z】

windows Forms编程里面有一个DataGridView控件&#xff0c;它不光是可以显示数据&#xff0c;可以显示按钮&#xff0c;复选框&#xff0c;甚至还可以显示图片。这些图片可以来自于数据库&#xff08;用二进制的方式存储的&#xff09;&#xff0c;也可以来自文件系统。下面是一…

在winform上内嵌入其它的程序

这段代码很有意义,用于把一个程序的界面嵌入到我们自己程序的某个指定窗体上. 比如在某个项目里,我需要把基恩士的激光扫描轮廓显示给客户看,但是激光的DLL中并没有这种功能提供. 于是我想先启动激光的官方程序用以显示轮廓, 然后再把这种显示界面嵌入到我自己程序的界面上指定…