Jquery Gritter 设置位置答案

【问题标题】：Jquery Gritter set positionJquery Gritter 设置位置
【发布时间】：2016-01-30 01:08:41
【问题描述】：

gritter的位置可以改吗？或者甚至更好地将它绑定到诸如 span 或 div 之类的元素上？

我试过了：

        $.gritter.add({
            title: 'Dashboard',
            text: 'Field updated!',
            time: 2000,
            position: 'center'
       });

（也尝试过按钮，顶部等）但位置保持不变

【问题讨论】：

标签： javascript jquery gritter

【解决方案1】：

通过阅读文档，您似乎无法像这样将 gritter 居中，只有'bottom-left'、'bottom-right'、'top-left'、'top-right'

$.extend($.gritter.options, { 
    position: 'bottom-left', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
    fade_in_speed: 'medium', // how fast notifications fade in (string or int)
    fade_out_speed: 2000, // how fast the notices fade out
    time: 6000 // hang on the screen for...
});

如果你用 css 改变位置呢？

【讨论】：

这应该扩展到标记为答案，我同意。

【解决方案2】：

你可以试试……

//css

.gritter-center{
position:fixed;
left:33%;
right:33%;
top:33%
}

//Javascript

$.gritter.add({
 title: 'This is a centered notification',
 text: 'Just add a "gritter-center" class_name to your $.gritter.add or globally to   $.gritter.options.class_name',
 class_name: 'gritter-info gritter-center'  
});

【讨论】：

【解决方案3】：

将自定义类“中心”添加到您的特定 css 文件中

#gritter-notice-wrapper.center {
    position:fixed; 
    left:33%; 
    right:33%; 
    top:33%;
}

调整 css 参数以调整 gritter 通知位置。

对 jquery.gritter.js 进行变通（集成 add 函数...）

换行

position = $.gritter.options.position,

与

position = params.position || $.gritter.options.position,

最后调用你的 add gritter 函数

$.gritter.add({
            title: 'Dashboard',
            text: 'Field updated!',
            time: 2000,
            position: 'center'
       });

【讨论】：

【解决方案4】：

通过 css 改变位置，如左和上位置：

$("#gritter").css('left',"100px");
$("#gritter").css('top',"20px");

【讨论】：

【解决方案5】：

我建议采用以下方法，而不是使用 33%，这会将砂砾放置在靠近中心但几乎总是略微偏离的位置。如果您也将 grinter 自定义为不同/非固定宽度，这应该可以工作。

#gritter-notice-wrapper.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

然后，（如 bech 所述）允许按照最初的要求配置位置，而不是仅在 js 文件中的选项中：

在 jquery.gritt.js 中，替换

position = $.gritter.options.position,

与

position = params.position || $.gritter.options.position,

【讨论】：