web-dev-qa-db-ja.com

toastrアラートをbootstrapアラートのように見せます

ToastrのポップアップをBootstrapアラートと同じか、非常に近くに見せたいのですが、どうすればよいですか？

twitter-bootstraptoastr
17
Sean Kearon

Bootstrapアラートの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;
}

必要に応じてパディングを残すか、toastrを編集する代わりに独自のCSSファイルに追加することができます（おそらく、後でロードされることを確認してください）。

28
frostyterrier

それらをbootstrap 3.2.0と同じにするために、選択した回答の組み合わせを使用しましたが、alert-errorはalert-dangerである必要があります- fontawesomeアイコンのアイコン

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

それらをまったく同じに見せるために私も

  • トーストの不透明度を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;
}
5
james

この投稿は少し古いですが、私は別の可能な解決策を追加すると思いました。

デフォルトのbootstrap "alert"カラースキームは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;
}
2
DReimer