Detailed explanation of BlockUI in Jquery

Which jQuery version does the BlockUI plugin need ?
BlockUI is compatible with jQuery v1.2.3 and above

What are the changes in the V2 version of the BlockUI plugin?
Elements used for tooltips are not removed from the DOM when unlocked The
default mask layer is black
The available options settings have been unified and cleaned
up The method of setting plugin options has been changed Changed to
drop support for Opera 8
Improved Source code readability
removed displayBox functionality (other plugins will do better)

Is the blockUI plugin in my original code compatible with the new version 2.00?
Incompatible, if the original code changes the default properties of blockUI, there will be compatibility problems. The syntax for how options are set has changed slightly. Please see the Options page to learn how to set options for the new version.

Does the BlockUI plugin depend on other plugins?
not depend on

How do I format tooltips using an external stylesheet?
Please check the demo page .

Can I change the default message when the page is locked?

Can. The default message is stored in $.blockUI.defaults.message. You can replace it with a new value, for example:
$.blockUI.defaults.message = "Please be patient...";

Can I change the color and opacity of the mask layer?

Can. Default overlay styles are stored in $.blockUI.defaults.overlayCSS. You can specify a different color and transparency,

例如
// 使用黄色遮罩层
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 使遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';

BlockUI支持Opera 8么？
不支持

在Linux的FF上我为什么看不到遮罩层？

有几个人告诉我，在FF/Linux上整个页面的透明度渲染慢的让人发疯，所以默认情况下，在这些平台上遮罩层不透明。你可以重设applyPlatformOpacityRules值来启用透明度。例如:

// 在FF/Linux下启用遮罩层透明$.blockUI.defaults.applyPlatformOpacityRules = false;

BlockUI基本使用
      // 当有ajax请求时，当加载信息较慢时，会显示该等待信息，带来良好的用户体验
        $(document).ajaxStart(function () {
            $.blockUI({

// $.blockUI.defaults.message = "请稍候";(不写在$.blockUI({})里，写在外面)
message: '<span style="font-size:13px;font-weight:bolder">请稍候</span>',

                // 指的是提示框的css
                css: {
                    width: "45px",   // 宽度小一点
                    top: "50%",
                    left: "50%"
                },

                // 遮光罩的css
                // 等价$.blockUI.defaults.overlayCSS.backgroundColor = "#E4E7EC";
                overlayCSS: {
                    backgroundColor: "yellow",
                    opacity:"0.8"
                }
            });
        });

下载
新版本的blockUI v2.00可以在这里得到: jquery.blockUI.js.

旧版本的blockUI仍然可以在这里得到： http://jqueryjs.googlecode.com/svn/trunk/plugins/blockUI/jquery.blockUI.js. 旧版本的文档在这里.

Original post address: http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html

Detailed explanation of BlockUI in Jquery

Guess you like