JQuery 插件 - 弹窗:BlockUI

JQuery的弹窗插件,网上实在有很多做的比较好的,比如artDialog、layer,甚至EasyUI等等。这些在效果上做的非常好。但我觉得一个小小的弹窗提示,没有必要引用这些(其实是有点大材小用了!)这里要介绍的是BlockUI,一个我认为非常好用的,简单朴素轻量级的插件。

先看一下效果:

JQuery 插件 - 弹窗: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)