twitter-bootstrap - example - toastr js ejemplos

Hacer que las alertas de toastr se vean como alertas de arranque

Question

Me gustaría hacer que la ventana emergente de toastr se vea igual o muy cercana a las alertas de Bootstrap. ¿Cómo puedo hacer esto?

Answer 1

Esta publicación es un poco antigua, pero pensé que agregaría otra solución posible.

Encontré que la combinación de colores predeterminada de "alerta" de bootstrap era una pequeña luz para los mensajes de toastr. Usé un archivo LESS personalizado e hice lo siguiente para oscurecerlos.

#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);
   }
}

Opcionalmente, también puede cambiar el color del texto en el mensaje:

.toast-message {
   color: #000;
}

Answer 2

Incluya el CSS para las alertas de Bootstrap, luego en sus opciones toastr, cambie los valores de toastClass y iconClasses:

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

Luego, en el CSS de toastr, elimine el dropshadow de #toast-container > div para que quede como:

#toast-container > div {
    width: 300px;
}

Puede dejar el relleno si lo desea, o agregarlo a su propio archivo CSS en lugar de editar los de toastr (probablemente el mejor, solo asegúrese de que el suyo esté cargado más adelante).

Answer 3

Para hacer que sean lo mismo que bootstrap 3.2.0, utilicé una combinación de la respuesta seleccionada, aunque alert-error alert-danger debería ser de alert-danger , y esta idea, que reemplaza los iconos con iconos impresionantes.

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

Para que se vean exactamente igual yo también

• Ajusta la opacidad de los brindis a 1.
• cambió el título y el color del mensaje para que coincida con bootstrap

css es

#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;
}