JQuery 插件 - 弹窗:BlockUI
JQuery的弹窗插件,网上实在有很多做的比较好的,比如artDialog、layer,甚至EasyUI等等。这些在效果上做的非常好。但我觉得一个小小的弹窗提示,没有必要引用这些(其实是有点大材小用了!)这里要介绍的是BlockUI,一个我认为非常好用的,简单朴素轻量级的插件。
先看一下效果:
下面就来讲一下使用。
一、引用插件
- <script src="jquery.min.js" type="text/javascript"></script>
- <script src="Jquery.BlockUI.min.js" type="text/javascript"></script>
二、使用
- <script type="text/javascript">
- $.blockUI(); // 打开
- //$.unblockUI(); // 关闭
- </script>
只需要简单的一句就可以得到上面图片中的弹窗了。
三、参数设置及用法
打开BlockUI的源码可以看到,弹窗的属性都可以在defaults里面设置。
message : 弹出框的信息,可以为html,默认为:<h1>Please wait...</h1>
如:$.blockUI({message:'这是测评'});
$.blockUI({message:$("#test")});
title : 弹窗标题,默认 null ,只能在 theme 为true 的时候使用
theme : 默认 false ,设置为 true 时将使用jqueryUI的 theme
draggable : 是否可拖动,默认 true
css : 弹窗的css样式,默认如下
- css:{
- padding: 0,
- margin: 0,
- width: '30%',
- top: '40%',
- left: '35%',
- textAlign: 'center',
- color: '#000',
- border: '3px solid #aaa',
- backgroundColor:'#fff',
- cursor: 'default'
- }
overlayCSS : 遮罩层的样式,可以设置背景颜色,透明度,鼠标样式,默认如下:
- overlayCSS:{
- backgroundColor: '#000',
- opacity: 0.6,
- cursor: 'default'
- }
cursorReset : 等待消息返回是鼠标样式重置,默认为Default
- cursorReset: 'default'
growlCSS : 使用$.growlUI完成弹窗时的样式(具体怎么用没试过)
- growlCSS: {
- width: '350px',
- top: '10px',
- left: '',
- right: '10px',
- border: 'none',
- padding: '5px',
- opacity: 0.6,
- cursor: 'default',
- color: '#fff',
- backgroundColor: '#000',
- '-webkit-border-radius':'10px',
- '-moz-border-radius': '10px',
- 'border-radius': '10px'
- }
baseZ: 弹窗的z-index,默认1000,一般不需要修改,越大越在上面
centerX: 水平居中,默认为 true
centerY: 竖直居中,默认为 true
bindEvents: 遮罩时是否禁用键盘和鼠标事件,默认为 true
constrainTabKey: 遮罩内容的Tab导航是否可用,默认为 true
fadeIn : 淡入时间,默认为 200
fadeOut : 淡出时间,默认为 400
timeout : 自动淡出时间 默认为 0,不自动淡出
showOverlay : 是否自动遮罩 默认为 true
focusInput : 弹窗后自动获得焦点 默认为 true
onBlock : 弹窗完成后的回调,可自行定义function,默认为 null
onUnblock : 弹窗解锁后的回调,可自行定义function,默认为 null
常用的设置目测也就这么多了,想了解其它更多的属性设置,可以访问blockUI官网
JQuery 插件 - 弹窗:BlockUI的更多相关文章
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 点击弹出 +1放大效果 -- jQuery插件
20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- jQuery 插件 Magnify 开发简介(仿 Windows 照片查看器)
前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
- 如何写jquery插件
首页 新文章 联系 管理 订阅 自己写一个 jQuery 插件 我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一 ...
- jQuery插件EasyDrag轻松实现JS拖动的效果
jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...
- jquery 插件和后台模板搜集
弹框 alert confirmhttp://www.jq22.com/jquery-info2607 jQuery表格排序筛选插件http://www.jq22.com/jquery-info880 ...
- 常用JQUERY插件大全
jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...
- Jquery插件:提示框
在实际项目中,很容易有这种需求:当某个操作成功或失败,需要给用户一个提示.当然最简单的做法是调用alert()方法弹窗.但alert()属于JavaScript中BOM部分,每个浏览器的样式不太一样, ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
随机推荐
- Android中如何将dp,dip,sp与px相互转化
Android中有很多度量单位:比如常用的dp,dip,sp,px等,有时候需要将他们相互转换,有下面非常方便的方法: 比如sp转换成px: TypedValue.applyDimension(Typ ...
- android插件化-获取apkplug框架已安装插件-03
上一篇文章成功的将apkplug框架嵌入了应用中而且启动 链接http://www.apkplug.com/blog/?post=10 这一篇文章实现怎样获取全部已安装插件 一 获取框架的System ...
- hduTHE MATRIX PROBLEM(差分约束)
题目请戳这里 题目大意:给一个n*m的矩阵,求是否存在这样两个序列:a1,a2...an,b1,b2,...,bm,使得矩阵的第i行乘以ai,第j列除以bj后,矩阵的每一个数都在L和U之间. 题目分析 ...
- HDU 2896 AC自动机 裸题
中文题题意不再赘述 注意字符范围是可见字符,从32开始到95 char c - 32 #include <stdio.h> #include <string.h> #inclu ...
- C# 自己定义 implicit和explicit转换
explicit 和 implicit 属于转换运算符,如用这两者能够让我们自己定义的类型支持相互交换explicti 表示显式转换.如从 A -> B 必须进行强制类型转换(B = (B)A) ...
- java 中读取本地文件中字符
java读取txt文件内容.可以作如下理解: 首先获得一个文件句柄.File file = new File(); file即为文件句柄.两人之间连通电话网络了.接下来可以开始打电话了. 通过这条线路 ...
- Android消息机制(1)
在Android中,线程内部或者线程之间进行信息交互时经常会使用消息,这些基础的东西如果我们熟悉其内部的原理,将会使我们容易.更好地架构系统,避免一些低级的错误.在学习Android中消息机制之前,我 ...
- Java 编程的动态性,第 6 部分: 利用 Javassist 进行面向方面的更改--转载
本系列的 第 4 部分和 第 5 部分讨论了如何用 Javassist 对二进制类进行局部更改.这次您将学习以一种更强大的方式使用该框架,从而充分利用 Javassist 对在字节码中查找所有特定方法 ...
- SDWebImage 图片缓存机制
SDWebImage与iOS系统自带的缓存相比,优势是什么? 从iOS5开始,iOS NSURLCache对于原生得HTTP Response做内存和磁盘缓存.每一次缓存命中(缓存命中就是说内存或者磁 ...
- Android 仿Win8的metro的UI界面(上)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23441455 昨晚没事手机下载了一些APP,发现现在仿win8的主界面越来越多, ...