强大的jQuery弹出层插件–BlockUI

经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。

先看看BlockUI的演示效果：

查看演示

BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。

先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩，本博在另一篇文章中详细的说明了javascript文件和CSS文件的压缩。

1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>
2 <script src="images/jquery.blockUI.js" type="text/javascript"></script>

导入库文件后，就可以调用BlockUI了，BlockUI的调用挺简单的，看下面这段代码

01 $(function(){
02 $('#box_btn').click(function(){   //给box_btn绑定一个鼠标点击的事件
03         $.blockUI({    //当点击事件发生时调用弹出层
04              message: $('#box'),    //要弹出的元素box
05              css: {    //弹出元素的CSS属性
06                  top: '50%',
07          left: '50%',
08          textAlign: 'left',
09          marginLeft: '-320px',
10          marginTop: '-145px',
11                  width: '600px',
12                  background: 'none'
13             }
14         });
15     $('.blockOverlay').attr('title','单击关闭').click($.unblockUI);   //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
16     $('.close').click($.unblockUI);  //也可以自定义一个关闭按钮来关闭弹出层
17 });
18 });

看了上面的代码，其实你会发觉BlockUI的使用很简单，有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。

$.blockUI定义了一个message属性的，该属性的值就定义了要弹出的元素，比如要弹出一个id为box的div元素，就可以这样写：message: $(‘#box’)，对应了上面的第4行代码。需要注意的是，要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为display:none。

$.blockUI还定义了一个css属性，该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看，其实在库文件中也默认定义了一个弹出层的样式，如果你在页面中定义的样式效果并不是很理想，最好是看看库文件中的$.blockUI.defaults的CSS属性。

如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看说明文档。

BlockUI的下载地址是：hhttp://jquery.malsup.com/block/#download

另一个简单实用的弹出层组件–easyDialog：http://stylechen.com/easydialog-v2.0.html

原载于： 雨夜带刀’s Blog
本文链接： http://stylechen.com/jquery-blockui.html
如需转载请以链接形式注明原载或原文地址。