Modal

by anup1986

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button type="button" data-bind="click: moveDown">Move down</button>
<button type="button" data-bind="click: moveUp">Move Up</button>

<button type="button" data-bind="click: modal">Modal</button>

<div id="modal" class="hidden">
    <span>Some text</span>
    <button type="button" data-bind="click: moveDown">Close</button>
</div>

CSS

body {
    height: 400px;
}

#modal {
    width: 200px;
    height: 300px;    
    background-color: lightblue;
    z-index: -1;
    
    -webkit-transition:All 0.4s ease;
    margin-top: 400px;
}

.hidden {
    opacity: 0;
}

.moveUp {
    z-index: 20 !important;
    -webkit-transform: translateY(-400px);
    position: absolute;
    top: 0;
}

.moveDown {
    z-index: -1;
    -webkit-transform: translateY(400px);
}

JavaScript

var vm = function(){
    var self = this;
    
    self.moveUp = function(){
        var modal = $('#modal');        
        modal.removeClass('hidden');
        modal.addClass('moveUp').removeClass('moveDown');
    };
    
    self.moveDown = function(){
        var modal = $('#modal');
        modal.addClass('moveDown').addClass('hidden').removeClass('moveUp');
    }; 
    
    self.modal = function(){
        var modal = $('#modal');
        var isVisible = modal.hasClass('hidden');
        
    };
};

ko.applyBindings(new vm());