Любая альтернатива blockUI для jQuery?

Question

Вопрос говорит сам за себя! Я ищу простую в использовании альтернативу blockUI для jQuery . В течение нескольких дней я пытался центрировать диалоговое окно с blockUI как в FireFox, так и в IE, но без шансов. Не работает Я посмотрел на этот вопрос о центрировании диалогового окна blockUI ( Как я могу получить DIV для центрирования на странице, используя jQuery и blockUI? ), но оно работает только с 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 Center

Answer 2

Для диалоговых окон я переключился с blockUI на Jquery UI . Я думаю, что это лучше.

Answer 3

Из документации:

Почему я не вижу оверлеев в FF в Linux?

Несколько человек сообщили мне, что рендеринг полной непрозрачности страницы в FF / Linux очень медленный, поэтому по умолчанию он отключен для этой платформы. Вы можете включить его, переопределив свойство applyPlatformOpacityRules следующим образом:

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

Answer 4

Если проблема вызвана загрузкой плагина измерений вместе с последней версией jQuery, то измерения были объединены с ядром несколько версий назад и вызывали конфликт.

Answer 5

Вот расширение, которое я наткнулся и немного изменил. Глядя на это сейчас, я думаю, что это на самом деле немного грязно и может использовать очистку (есть некоторые неиспользованные переменные, я думаю)

$.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();