Kendo UI Notifications Sample

HTML

<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<span id="popupNotification"></span>
<button id="showPopupNotify" class="k-button">Notification Alert</button><br />
<br/><br/>


<div class='big-widget notification-widget'>
  <div class='header' id='workspace_widget_header'>
    <div class='header-left'>▼ Notifications</div>
    <div class='header-right'></div>
  </div>
  <div>

CSS

#appendto {
   float: right;
   width: 300px;
   height: 170px;
   margin: 1em 0;
   overflow: auto;
 }

 .big-widget {
   background: none repeat scroll 0 0 #FEFEFE;
   position: relative;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   border: 1px solid #28679f;
   -webkit-box-shadow: 0 5px 14px #666666;
   -moz-box-shadow: 0 5px 14px #666666;
   box-shadow: 0 5px 14px #666666;
 }

 .big-widget .header {
   background: none repeat scroll 0 0 #28679f;
   background-image: url("headerLinearGradient.svg");
   background-image: -webkit-linear-gradient(top, #317fc4, #225887);
   background-image: -moz-linear-gradient(top, #317fc4, #225887);
   background-image: -ms-linear-gradient(top, #317fc4, #225887);
   background-image: -o-linear-gradient(top, #317fc4, #225887);
   background-image: linear-gradient(top, #317fc4, #225887);
   -webkit-border-radius: 2px 2px 0 0;
   -moz-border-radius: 2px 2px 0 0;
   border-radius: 2px 2px 0 0;
   color: #fefefe;
   font-weight: normal;
   font-family: Lucida Grande, Segoe UI Semibold, Arial, sans-serif;
   padding: 6px;
   min-height: 18px;
   cursor: move;
 }

 .body-content {
   direction: ltr;
   font-family: Lucida Grande, Segoe UI, Arial, sans-serif;
   font-size: 0.9em !important;
   text-align: left;
 }

 .command-widget {
   background: none repeat scroll 0 0 #FEFEFE;
   border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   box-shadow: 0 6px 10px #888888;
   width: 250px;
 }

 .widget-header {
   background: -moz-linear-gradient(top, #579ad5 0%, #27679f 50%, #1d4c76 100%);
   /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #579ad5), color-stop(50%, #27679f), color-stop(100%, #1d4c76));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #579ad5 0%, #27679f 50%, #1d4c76 100%);
   /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #579ad5 0%, #27679f 50%, #1d4c76 100%);
   /* Opera 11.10+...

JavaScript

var popupNotify = $("#popupNotification").kendoNotification().data("kendoNotification");

$("#showPopupNotify").click(function() {
  //alert("test");
  var d = new Date();
  popupNotify.show("Record added", "error");
});