Làm cho cảnh báo toastr trông giống như cảnh báo bootstrap

Question

Tôi muốn làm cho popup của toastr trông giống như, hoặc rất gần với, cảnh báo Bootstrap. Tôi có thể làm cái này như thế nào?

Answer 1

Bao gồm CSS cho các cảnh báo Bootstrap, sau đó trong tùy chọn toastr của bạn, thay đổi các giá trị của toastClass và iconClasses:

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

Sau đó, trong CSS toastr của, loại bỏ các DropShadow từ #toast-container > div để nó kết thúc lên trông như :

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

Bạn có thể rời khỏi vùng đệm nếu bạn muốn hoặc thêm vào tệp CSS của riêng bạn thay vì chỉnh sửa toastr's (có lẽ tốt nhất, chỉ cần đảm bảo bạn đã tải sau).

Answer 2

Bài đăng này hơi cũ, nhưng tôi nghĩ tôi sẽ thêm một giải pháp khả thi khác.

Tôi đã tìm thấy bảng màu "cảnh báo" khởi động mặc định là một chút ánh sáng cho các thông báo toastr. Tôi đã sử dụng một tệp LESS tùy chỉnh và làm như sau để làm tối chúng.

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

Tùy chọn, bạn cũng có thể thay đổi màu sắc của văn bản trong tin nhắn:

.toast-message { 
    color: #000; 
} 

Answer 3

Để làm cho họ giống như bootstrap 3.2.0, tôi sử dụng một sự kết hợp của các câu trả lời được lựa chọn - mặc dù alert-error nên alert-danger - và ý chính này, thay thế các biểu tượng với các biểu tượng fontawesome

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

Để làm cho họ trông giống hệt nhau tôi cũng

• thiết lập Opacity của nâng cốc chúc mừng tới 1
• thay đổi tiêu đề và thông điệp của màu sắc để phù hợp với bootstrap

css là

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