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的更多相关文章

  1. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  2. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  3. jQuery 插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  4. 如何写jquery插件

      首页    新文章  联系  管理  订阅  自己写一个 jQuery 插件 我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一 ...

  5. jQuery插件EasyDrag轻松实现JS拖动的效果

    jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...

  6. jquery 插件和后台模板搜集

    弹框 alert confirmhttp://www.jq22.com/jquery-info2607 jQuery表格排序筛选插件http://www.jq22.com/jquery-info880 ...

  7. 常用JQUERY插件大全

    jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...

  8. Jquery插件:提示框

    在实际项目中,很容易有这种需求:当某个操作成功或失败,需要给用户一个提示.当然最简单的做法是调用alert()方法弹窗.但alert()属于JavaScript中BOM部分,每个浏览器的样式不太一样, ...

  9. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

随机推荐

  1. ffmpeg错误隐藏框架分析

    本文主要是分析ffmpeg的错误隐藏框架,故解码流程此处不会特地进行讨论,网上其他地方其实也有不少介绍相关流程的了,但发现基本没有介绍错误隐藏流程的,故本文希望能填补这个空白. 我们直接从decode ...

  2. android:ellipsize的使用

    EidtText和textview中内容过长的话自动换行,使用android:ellipsize与android:singleine可以解决,使只有一行. EditText不支持marquee 用法如 ...

  3. Java基础知识强化之IO流笔记04:throw和throws的区别

    1. throw概述 在功能方法内部出现某种问题,程序不能继续运行,需要进行跳转时,就用throw把异常对象抛出. 2. 案例演示: (1) package com.himi.throwdemo; p ...

  4. 简单dp --- HDU1248寒冰王座

    题目链接 这道题也是简单dp里面的一种经典类型,递推式就是dp[i] = min(dp[i-150], dp[i-200], dp[i-350]) 代码如下: #include<iostream ...

  5. apache的域名添加虚拟端口号

    1. vi /etc/httpd/conf/httpd.conf 2. 搜索Listen 80,在后面添加Listen 8080 3. 重启apache服务器./usr/sbin/apachectl ...

  6. 开启mysql慢查询日志并使用mysqldumpslow命令查看

    mysql服务器有一项功能,可以检测到哪条sql语句查询得比较慢,就是慢查询slowlog,现在介绍如何开启. 在[mysqld]下面增加如下代码: long_query_time = 1 log-s ...

  7. [ERROR] Unknown/unsupported storage engine: InnoDB

    将CentOS上的mysql升级以后,出现无法启动服务的问题.运行mysqld_safe后查看log信息,看到标题所示的错误.搜索以后发现是配置不对,难道两个版本的配置不能互相兼容?那还叫升级?坑爹啊 ...

  8. mssql 查询全部用户创建表 条数及占用空间大小(KB)

    select b.name as tablename , --表名a.rowcnt as datacount,   --条数rtrim(8*a.dpages) as size  --占用空间单位KBf ...

  9. Java之简单的聊天工具

    今天整理资料的时候,找出自己几年前刚学Java时做过的一个简易的聊天工具,有服务器也有客户端,能发送文字消息和文件,但是用户上线并未存入数据库,而只是简单的缓存在服务器的一个数组中,所以,只要服务器一 ...

  10. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...