Jquery BlockUI在右下角增长

Question

我正在使用BlockUI for jquery来执行咆哮通知，我已经将其连接并工作，但我希望通知位于右下角，而不是右上角。

我修改了css以使用bottom:10px，但咆哮没有正确渲染。它从底部开始，但在页面的一半处展开。

我这里有一个JSfiddle：http://jsfiddle.net/3wNFe/

带有以下代码

$(document).ready(function() {
$.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 2000,
            showOverlay: false,
            centerY: false,
            css: {
                width: '200px',
                bottom: '10px',
                left: '',
                right: '10px',
                border: 'non',
                padding: '5px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .6,
                color: '#fff'
            }
        });
});

EDIT-解决方案我在使用firebug时找到了解决方案，添加

top: '',

以使其正确呈现。

Answer 1

问题是BlockUI在默认情况下设置了最高百分比：

试试这个：

$(document).ready(function() {
$.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 20000,
            showOverlay: false,
            centerY: false,
            css: {
                right: 0,
                bottom: 0,
                left: '',
                top: ''
            }
        });
});

Answer 2

BlockUI默认情况下将顶部位置设置为40%。我尝试使用全局覆盖，但没有成功。然后我尝试了前100名，这似乎奏效了。

演示：

http://jsfiddle.net/3wNFe/7/

$.blockUI({
                message: $('div.growlUI'),
                fadeIn: 700,
                fadeOut: 700,
                timeout: 2000,
                showOverlay: false,
                centerY: false,
                css: {
                    width: '200px',
                    bottom: '10px',
                    top: '-100',
                    left: '',
                    right: '10px',
                    border: 'non',
                    padding: '5px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .6,
                    color: '#fff',
                }
            });

Answer 3

将top:''添加到CSS中以更正显示。