Question

我正在使用BlockUI for jquery做一个咆哮通知，我已将它连接起来并正常工作，但我希望通知位于右上角而不是右上角。

我修改了css以使用bottom：10px但是growl无法正确渲染。它从底部开始，但在页面的一半处拉伸。

我在这里有一个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'
            }
        });

});

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

top: '',

到css以使其正确渲染。

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

将顶部：''添加到CSS以更正显示。

Jquery BlockUI在右下角咆哮

3 个答案: