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 ...
随机推荐
- ffmpeg错误隐藏框架分析
本文主要是分析ffmpeg的错误隐藏框架,故解码流程此处不会特地进行讨论,网上其他地方其实也有不少介绍相关流程的了,但发现基本没有介绍错误隐藏流程的,故本文希望能填补这个空白. 我们直接从decode ...
- android:ellipsize的使用
EidtText和textview中内容过长的话自动换行,使用android:ellipsize与android:singleine可以解决,使只有一行. EditText不支持marquee 用法如 ...
- Java基础知识强化之IO流笔记04:throw和throws的区别
1. throw概述 在功能方法内部出现某种问题,程序不能继续运行,需要进行跳转时,就用throw把异常对象抛出. 2. 案例演示: (1) package com.himi.throwdemo; p ...
- 简单dp --- HDU1248寒冰王座
题目链接 这道题也是简单dp里面的一种经典类型,递推式就是dp[i] = min(dp[i-150], dp[i-200], dp[i-350]) 代码如下: #include<iostream ...
- apache的域名添加虚拟端口号
1. vi /etc/httpd/conf/httpd.conf 2. 搜索Listen 80,在后面添加Listen 8080 3. 重启apache服务器./usr/sbin/apachectl ...
- 开启mysql慢查询日志并使用mysqldumpslow命令查看
mysql服务器有一项功能,可以检测到哪条sql语句查询得比较慢,就是慢查询slowlog,现在介绍如何开启. 在[mysqld]下面增加如下代码: long_query_time = 1 log-s ...
- [ERROR] Unknown/unsupported storage engine: InnoDB
将CentOS上的mysql升级以后,出现无法启动服务的问题.运行mysqld_safe后查看log信息,看到标题所示的错误.搜索以后发现是配置不对,难道两个版本的配置不能互相兼容?那还叫升级?坑爹啊 ...
- mssql 查询全部用户创建表 条数及占用空间大小(KB)
select b.name as tablename , --表名a.rowcnt as datacount, --条数rtrim(8*a.dpages) as size --占用空间单位KBf ...
- Java之简单的聊天工具
今天整理资料的时候,找出自己几年前刚学Java时做过的一个简易的聊天工具,有服务器也有客户端,能发送文字消息和文件,但是用户上线并未存入数据库,而只是简单的缓存在服务器的一个数组中,所以,只要服务器一 ...
- javascript DOM对象转jquery对象
首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...