强大的jquery弹出层插件blockUI

之前工作中每次需要用到弹出层时,就满地的找。上次也不例外,也这样了。

不过这次发现了一个好东西,jquery的弹出层插件blockUI。

原文介绍地址:强大的jQuery弹出层插件–BlockUI

blockUI官网:http://jquery.malsup.com/block

blockUI GitHub :

先导入jQuery的库文件(小提示:使用Google服务器的压缩版jQuery库文件加载速度会更快),然后再导入BlockUI的库文件

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

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

 $(function(){
$(‘#box_btn’).click(function(){   //给box_btn绑定一个鼠标点击的事件
        $.blockUI({    //当点击事件发生时调用弹出层
             message: $(‘#box’),    //要弹出的元素box
             css: {    //弹出元素的CSS属性
                 top: ‘50%’,
         left: ‘50%’,
         textAlign: ‘left’,
         marginLeft: ‘-320px’,
         marginTop: ‘-145px’,
                 width: ‘600px’,
                 background: ‘none’
            }
        });
    $(‘.blockOverlay’).attr(‘title’,’单击关闭’).click($.unblockUI);   //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
    $(‘.close’).click($.unblockUI);  //也可以自定义一个关闭按钮来关闭弹出层
});
});

看了上面的代码,其实你会发觉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

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*