blockUI

1.$.ajax({
2. type: "POST",
3. url: "GetFreeStand.do",
4. data: "hid="+$("#hall").val()+"&pid="+$("#plan").val(),
5. dataType:'json',
6. async: false,
7. beforeSend:function(){
8. $.blockUI({message:'获取大厅大厅的空闲摊位，请稍候...'});
9. },
10. complete: function() {
11. $.unblockUI();
12. } ,
13. success: function(data){
14. $("#stand").empty();
15. for(var i=0;i
16. var row = data.rows[i];
17. $("#stand")[0].options.add(new Option(row.name,row.id));
18. }
19. }
20. });

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

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

blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来控制弹出层显示的内容，大小，位置等。blockUI方法的常用的参数有：message,css,overlayCSS,showOverlay。

　　message：主要用来设置要显示的内容，可以直接设置为一段文字，html代码或者使用jquery获取页面上隐藏的div。

　　css：主要用来设置弹出层的样式，包括弹出层的位置，大小，边框等。

　　overlayCSS：主要用来设置遮罩层的样式，包括背景色，透明度等。

　　showOverlay：主要用来设置是否显示遮罩层，如果要隐藏遮罩层可以设置为false。

 

$("#btnSubmit").click(function () {

$.blockUI({

message: $("#loginForm"),

css: {

width: '300px',

height: '300px',
left: ($(window).width() - 300) / 2 + 'px',

top: ($(window).height() - 300) / 2 + 'px',
border: 'none'
} });});

$("#btnLogin").click(function () {

$.blockUI({
message: "正在登录，请稍候……",
css: {
border: '1px solid black'
} });
setTimeout(function () {

$.unblockUI() }, 1000);});

$("#btnCancel").click(function () {

$.unblockUI();});

 

$(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属性。
完整例子:

 

< /head>
< body>

用户名:
密码:

< /body>
< /html>