showNotification

Task Pane notification

using JQuery

showNotification = function(header, text) { 
   $('#notification-message-header').text(header);   
   $('#notification-message-body').text(text);   
   $('#notification-message').slideDown('fast');   
} 

using Fabric-JS Component (ms-MessageBanner)

Home.html

    <div class="ms-MessageBanner" id="notification-popup"> 
        <div class="ms-MessageBanner-content"> 
            <div class="ms-MessageBanner-text"> 
                <div class="ms-MessageBanner-clipper"> 
                    <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header"></div> 
                    <div class="ms-font-m ms-fontWeight-semilight" id="notification-body"></div> 
                </div> 
            </div> 
            <button class="ms-MessageBanner-expand" style="display:none"> 
                <i class="ms-Icon ms-Icon--chevronsDown"></i> 
            </button> 
            <div class="ms-MessageBanner-action"></div> 
        </div> 
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"></i> </button> 
    </div> 

Home.js

( function () { 

    var messageBanner; 

    Office.initialize = function (reason) { 
        $(document).ready(function () { 

            // Initialize the FabricUI notification mechanism and hide it 
            var element = document.querySelector('.ms-MessageBanner');  
            messageBanner = new fabric.MessageBanner(element); 
            messageBanner.hideBanner(); 
        }); 
    }; 

    function showNotification(header, content) { 
        $("#notification-header").text(header); 
        $("#notification-body").text(content); 
        messageBanner.showBanner(); 
        messageBanner.toggleExpansion(); 
    } 

})();