0

したがって、次のコードを使用して、jQueryを使用してウィンドウの中央にdivを配置しようとしています。

(function($) {
    $.fn.extend({
        center: function(options) {
            var options = $.extend({ // Default values
                inside: window,
                // element, center into window
                transition: 0,
                // millisecond, transition time
                minX: 0,
                // pixel, minimum left element value
                minY: 0,
                // pixel, minimum top element value
                withScrolling: true,
                // booleen, take care of the scrollbar (scrollTop)
                vertical: true,
                // booleen, center vertical
                horizontal: true // booleen, center horizontal
            }, options);
            return this.each(function() {
                var props = {
                    position: 'absolute'
                };
                if (options.vertical) {
                    var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                    if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                    top = (top > options.minY ? top : options.minY);
                    $.extend(props, {
                        top: top + 'px'
                    });
                }
                if (options.horizontal) {
                    var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                    if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                    left = (left > options.minX ? left : options.minX);
                    $.extend(props, {
                        left: left + 'px'
                    });
                }
                if (options.transition > 0) $(this).animate(props, options.transition);
                else $(this).css(props);
                return $(this);
            });
        }
    });
})(jQuery);​

これはChromeで正常に機能しますが、Firefoxで垂直方向に中央に配置されていないようで、何が間違っているのかわかりません。ウィンドウの高さを計算できなくなるFirefoxのバグはありますか？

4

2 に答える 2

0

これを試して：

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
    return this;
}

使用法：

$(element).center();

ソース

于 2012-09-27T19:30:27.320 に答える
0

何を変更したのか思い出せませんが、次のようになります。

$.fn.extend({
    center: function(options) {
        var options = $.extend({ // Default values
            inside: window,
            // element, center into window
            transition: 0,
            // millisecond, transition time
            minX: 0,
            // pixel, minimum left element value
            minY: 0,
            // pixel, minimum top element value
            withScrolling: true,
            // booleen, take care of the scrollbar (scrollTop)
            vertical: true,
            // booleen, center vertical
            horizontal: true // booleen, center horizontal
        }, options);

        $(this).each(function() {
            var props = {
                position: 'absolute'
            };
            if (options.vertical) {
                var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                top = (top > options.minY ? top : options.minY);
                $.extend(props, {
                    top: top + 'px'
                });
            }
            if (options.horizontal) {
                var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                left = (left > options.minX ? left : options.minX);
                $.extend(props, {
                    left: left + 'px'
                });
            }
            if (options.transition > 0) $(this).animate(props, options.transition);
            else $(this).css(props);

        });

        return $(this);
    }
});

Firefoxでは問題なく動作するようです：http：//jsfiddle.net/NQRUF/4/

于 2012-09-27T19:36:44.047 に答える