jQuery 的 blockUI 有什么替代方案吗？

Question

这个问题说明了一切！ 我正在寻找一种易于使用的 jQuery blockUI 替代品。 几天来我一直在尝试在 FireFox 和 IE 中将带有 blockUI 的对话框居中，但没有机会。 这不起作用。 我查看了有关将 blockUI 对话框居中的问题（如何使用 jQuery 和 blockUI 让 DIV 位于页面中心？）但它仅适用于 Firefox。

Answer 1

您可能想检查此插件调用 jQuery MSG。 它在包括 ie6 在内的大多数浏览器中运行良好。 而且它的重量非常轻，未压缩时只有 4k，带有代码注释。

示例代码

// this will block the page and shows a `please wait` message
$.msg();

// you can change the content by the following code
$.msg({
  content : '<img src="loading.gif"/> Sending mail :)'
});

演示页面

github

完整文档和用法请查看 这篇文章

或者如果你只是想集中一些 DOM 元素，你可以看看这个 jQuery 中心插件

Answer 2

对于对话框，我已从 blockUI 切换到 Jquery UI。 我认为这样更好。

Answer 3

这是我遇到并稍作修改的扩展。 现在看，我认为它实际上有点乱，可以使用清理（我认为有一些未使用的变量）

$.fn.vCenter = function(options) {
    var pos = {
        sTop : function() {
            return window.pageYOffset || $.boxModel && document.documentElement.scrollTop || document.body.scrollTop;
        },
        wHeight : function() {
            if ($.browser.opera || ($.browser.safari && parseInt($.browser.version) > 520)) {
                return window.innerHeight - (($ (document).height() > window.innerHeight) ? getScrollbarWidth() : 0);
            } else if ($.browser.safari) {
                return window.innerHeight;
            } else {
                return $.boxModel && document.documentElement.clientHeight || document.body.clientHeight;
            }
        }
    };
    return this.each(function(index) {
        if (index == 0) {
            var $this = $(this),
                $w = $(window),
                topPos = ($w.height() - $this.height()) / 2 + $w.scrollTop()
            ;
            if (topPos < 0 && (options == undefined || !options.allowNegative)) topPos = 0;
            $this.css({
                position: 'absolute',
                marginTop: '0',
                top: topPos //pos.sTop() + (pos.wHeight() / 2) - (elHeight / 2)
            });
        }
    });
};
$.fn.hCenter = function(options) {
    return this.each(function(index) {
        if (index == 0) {
            var $this = $(this),
                $d = $(document),
                leftPos = ($d.width() - $this.width()) / 2 + $d.scrollLeft()
            ;
            if (leftPos < 0 && (options == undefined || !options.allowNegative)) leftPos = 0;
            $this.css({
                position: "absolute",
                left: leftPos
            });
        }
    });
};
$.fn.hvCenter = function(options) {
    return this.vCenter(options).hCenter(options);
};

用法：

$('#verticalCenter').vCenter();
$('#horizontalCenter').hCenter();
$('#bothCentered').hvCenter();

Answer 4

如果问题是由于加载尺寸插件和最新版本的 jQuery 引起的，则尺寸在几个版本前已合并到核心中并导致冲突。

Answer 5

来自文档：

为什么我在 Linux 上的 FF 中看不到覆盖？

有几个人告诉我，FF/Linux 中的全页不透明渲染速度非常慢，因此默认情况下该平台禁用它。 您可以通过重写 applyPlatformOpacityRules 属性来启用它，如下所示：

// enable transparent overlay on FF/Linux 
$.blockUI.defaults.applyPlatformOpacityRules = false;