0

我正在使用 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'
            }
        });

});

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

top: '',

到 css 以使其正确呈现。

4

3 回答 3

0

问题是 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: ''
            }
        });

});
于 2013-06-26T15:33:23.353 回答
0

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',
                }
            });
于 2013-06-26T15:43:33.313 回答
0

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

于 2013-06-27T15:44:14.090 回答