JQuery 插件 - 弹窗：BlockUI

时间：2022-11-26 13:26:18

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

标签：

相关文章