CSS KO Popups

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<div id="t" data-bind="css: { open: IsOpen }">
  <div>Hello</div>
</div>

<button type="button" data-bind="click: toggle">Toggle</button>

CSS

#t {
  background: #000000;
  color: #ffffff;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 100px;
  width: 0px;
  opacity: 0;
  transition: 0.5s ease;
  transition-property: width, opacity;
}

#t > div {
  padding: 20px;   
}

#t.open {
  width: 200px;
  opacity: 1;
}

JavaScript

function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    this.IsOpen = ko.observable();
    
    if(data)
        ko.mapping.fromJS(data, _mapping, _this);
        
    this.toggle = function()
    {
      _this.IsOpen(!_this.IsOpen());  
    };
}

var model = new Model();
ko.applyBindings(model);