Orchard messages appear as text messages in the Messages Zone. But sometimes we need something fancier than a simple text.

In this example, I will use Toastr non-blocking notifications.  

First, we will hide the messages, you can do it with CSS, but in this example, I will use only JavaScript. 

$('.zone-messages .message').css('display', 'none');

After this, we will get all the messages and we will appear the correct type of Toastr notification. 

var messageElement;
$('.zone-messages .message').each(function () {
    messageElement = $(this);
    if(messageElement.hasClass('message-Information')){
        toastr.success(messageElement.html());
    } else if(messageElement.hasClass('message-Warning')){
        toastr.warning(messageElement.html());
    } else if(messageElement.hasClass('message-Error')){
        toastr.error(messageElement.html());
    }
});

After you install Toastr on your project, you can download the above code from GitHub and you are ready.