使 toastr 警报看起来像引导警报

Posted 2023-05-08

【中文标题】使 toastr 警报看起来像引导警报

【英文标题】：Make toastr alerts look like bootstrap alerts

【发布时间】：2013-02-10 14:11:46

【问题描述】：

我想让 toastr 的弹出窗口看起来与 Bootstrap 警报相同或非常接近。我该怎么做？

【参考方案1】：

包括引导警报的 CSS，然后在您的 toastr 选项中，更改 toastClass 和 iconClasses 的值：

toastr.options = 
    toastClass: 'alert',
    iconClasses: 
        error: 'alert-error',
        info: 'alert-info',
        success: 'alert-success',
        warning: 'alert-warning'
    
,

然后在 toastr 的 CSS 中，从 #toast-container > div 中删除阴影，使其最终看起来像：

#toast-container > div 
    width: 300px;

如果需要，您可以保留填充，或者将其添加到您自己的 CSS 文件中，而不是编辑 toastr 的（最好是确保之后加载您的）。

【讨论】：

可爱的工作 - 非常感谢！是的，我留下了 CSS，因为颜色足以阻止两个警报在视觉上发生冲突。

【参考方案2】：

为了使它们与 bootstrap 3.2.0 相同，我使用了所选答案的组合 - 尽管 alert-error 应该是 alert-danger - 和这个要点，它将图标替换为 fontawesome 图标

https://gist.github.com/askehansen/9528424

为了让它们看起来完全一样，我也

将 toast 的不透明度设置为 1 更改了标题和消息颜色以匹配引导程序

css 是

#toast-container > div 
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);


#toast-container > .alert 
    background-image: none !important;


#toast-container > .alert:before 
    position: fixed;
    font-family: FontAwesome;
    font-size: 24px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;


#toast-container > .alert-info:before 
    content: "\f05a";

#toast-container > .alert-info:before,
#toast-container > .alert-info 
    color: #31708f;


#toast-container > .alert-success:before 
    content: "\f00c";

#toast-container > .alert-success:before,
#toast-container > .alert-success 
    color: #3c763d;


#toast-container > .alert-warning:before 
    content: "\f06a";

#toast-container > .alert-warning:before,
#toast-container > .alert-warning 
    color: #8a6d3b;


#toast-container > .alert-danger:before 
    content: "\f071";

#toast-container > .alert-danger:before,
#toast-container > .alert-danger 
    color: #a94442;

【参考方案3】：

这篇文章有点老了，但我想我会添加另一个可能的解决方案。

我发现默认的引导程序“警报”配色方案对于 toastr 消息来说有点轻。我使用了一个自定义的 LESS 文件并执行了以下操作来使它们变暗。

#toast-container 
   @darken-amount: 10%;

   .toast-error 
      background-color: darken(@brand-danger, @darken-amount);
   

   .toast-warning 
      background-color: darken(@brand-warning, @darken-amount);
   

   .toast-success 
      background-color: darken(@brand-success, @darken-amount);
   

   .toast-info 
     background-color: darken(@brand-info, @darken-amount);
   

您还可以选择更改消息中文本的颜色：

.toast-message 
   color: #000;