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, '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官网