Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
      <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
      <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>    
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>   
  
</head>
<body>
  
  <span id="popupNotification"></span>
  <button name="show" id="show">Show it!</button>
  <div id="container"></div>
</body>
</html>
 
#container {
  border: 1px solid;
  height: 200px;
  width: 250px;
  overflow: auto;
}
​
.alertStyle {
  border: 1px solid;
  height: 25px;
  width: 180px;
  background: #990066;
  color: #FFF;
  font-family: "Tahoma";
  font-size: 12px;
  padding: 10px;
}
 
var popupNotification = $("#popupNotification").kendoNotification( { 
    position: {
      top: 30                             
    },
    width: "120px",
    autoHideAfter: 3000,
    appendTo: "#container",
    templates: [{
        type: "myAlert",
        template: "<div class='alertStyle'>Hey there, you #= myMessage #</div>"
    }] 
}).data("kendoNotification");
​
$("#show").click(function(){
​
  popupNotification.show({ myMessage: "ordered coffee!" }, "myAlert");
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x